Files
nuxt__ui/docs/app/components/content/examples/dashboard/DashboardSidebarOpenExample.vue

36 lines
734 B
Vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items: NavigationMenuItem[] = [{
label: 'Home',
icon: 'i-lucide-house',
active: true
}, {
label: 'Inbox',
icon: 'i-lucide-inbox'
}, {
label: 'Contacts',
icon: 'i-lucide-users'
}]
const open = ref(true)
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<UDashboardSidebar v-model:open="open">
<template #header="{ collapsed }">
<Logo v-if="!collapsed" class="h-5 w-auto" />
<UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
</template>
<UNavigationMenu
:items="items"
orientation="vertical"
/>
</UDashboardSidebar>
</template>