Caramel-CRM/resources/js/components/NavMain.vue

<script setup lang="ts">
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { urlIsActive } from '@/lib/utils';
import { type NavGroup } from '@/types';
import { Link, usePage } from '@inertiajs/vue3';
import { LayoutGrid } from 'lucide-vue-next';
import { dashboard } from '@/routes';
import SidebarSeparator from './ui/sidebar/SidebarSeparator.vue';

defineProps<{
    groups: NavGroup[];
}>();

const page = usePage();
</script>


<template>
    <SidebarGroup class="px-2 py-0">

        <SidebarMenuItem :key="'dashboard'">
            <SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'">
                <Link :href="dashboard()">
                <component :is="LayoutGrid" class="text-gray-500" stroke-width="1.5" />
                <span>Dashboard</span>
                </Link>
            </SidebarMenuButton>
        </SidebarMenuItem>
    </SidebarGroup>

    <SidebarGroup class="px-2 py-0" v-for="group in groups">
        <SidebarSeparator class="absolute mt-6 shrink transition-[opacity] opacity-0 group-data-[collapsible=icon]:opacity-100" style="width: calc(var(--spacing) * 4);"  />
        <SidebarGroupLabel class="text-bold uppercase text-gray-400 mt-2 group-data-[collapsible=icon]:mt-2">
            {{ group.title }}
        </SidebarGroupLabel>
        <SidebarMenu>
            <SidebarMenuItem v-for="item in group.items" :key="item.title">
                <SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title">
                    <Link :href="item.href">
                    <component :is="item.icon" :class="item.color" stroke-width="1.5" />
                    <span>{{ item.title }}</span>
                    </Link>
                </SidebarMenuButton>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarGroup>

</template>