mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Benjamin Canac
50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { NavigationMenuItem, SidebarProps } from '@nuxt/ui'
|
|
|
|
// Ignore the props for the example
|
|
defineProps<Pick<SidebarProps, 'mode'>>()
|
|
|
|
const open = ref(true)
|
|
|
|
const items: NavigationMenuItem[] = [{
|
|
label: 'Home',
|
|
icon: 'i-lucide-house',
|
|
active: true
|
|
}, {
|
|
label: 'Inbox',
|
|
icon: 'i-lucide-inbox',
|
|
badge: '4'
|
|
}, {
|
|
label: 'Contacts',
|
|
icon: 'i-lucide-users'
|
|
}]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-1">
|
|
<USidebar v-model:open="open" :mode="mode" title="Navigation">
|
|
<UNavigationMenu
|
|
:items="items"
|
|
orientation="vertical"
|
|
:ui="{ link: 'p-1.5 overflow-hidden' }"
|
|
/>
|
|
</USidebar>
|
|
|
|
<div class="flex-1 flex flex-col">
|
|
<div class="h-(--ui-header-height) shrink-0 flex items-center px-4 border-b border-default">
|
|
<UButton
|
|
icon="i-lucide-panel-left"
|
|
color="neutral"
|
|
variant="ghost"
|
|
aria-label="Toggle sidebar"
|
|
@click="open = !open"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1 p-4">
|
|
<Placeholder class="size-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|