<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>
