44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '#components';
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
|
|
const items = [
|
|
{
|
|
title: 'Home',
|
|
url: '/',
|
|
icon: h(Icon, { name: 'lucide:home' }),
|
|
},
|
|
{
|
|
title: 'About',
|
|
url: '/about',
|
|
icon: h(Icon, { name: 'lucide:inbox' }),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Application</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem v-for="item in items" :key="item.title">
|
|
<SidebarMenuButton as-child :tooltip="item.title">
|
|
<NuxtLink :to="item.url">
|
|
<component :is="item.icon"></component>
|
|
<span>{{ item.title }}</span>
|
|
</NuxtLink>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
</template>
|