Files
ComfyUI_frontend/src/components/widget/nav/NavItem.vue

33 lines
834 B
Vue

<template>
<div
class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
:class="
active
? 'bg-interface-menu-component-surface-selected'
: 'hover:bg-interface-menu-component-surface-hovered'
"
role="button"
@click="onClick"
>
<div v-if="icon" class="pt-0.5">
<NavIcon :icon="icon" />
</div>
<i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
<span class="flex items-center break-all">
<slot></slot>
</span>
</div>
</template>
<script setup lang="ts">
import type { NavItemData } from '@/types/navTypes'
import NavIcon from './NavIcon.vue'
const { icon, active, onClick } = defineProps<{
icon: NavItemData['icon']
active?: boolean
onClick: () => void
}>()
</script>