58 lines
2.6 KiB
Vue
58 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuAction } from '@/components/ui/crm-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/crm-sidebar/SidebarSeparator.vue';
|
|
|
|
defineProps<{
|
|
groups: NavGroup[];
|
|
}>();
|
|
|
|
const page = usePage();
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<SidebarGroup class="px-2 py-0 mt-[1.8rem]">
|
|
|
|
<SidebarMenuItem :key="'dashboard'">
|
|
<SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'" class="text-base">
|
|
<Link prefetch :href="dashboard()">
|
|
<LayoutGrid class="text-muted-foreground" :class="urlIsActive(dashboard(), page.url) ? 'text-primary' : 'text-sidebar-icon'" />
|
|
<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 w-4 bg-muted-foreground/50"
|
|
style="width: calc(var(--spacing) * 4);" />
|
|
<SidebarGroupLabel class="font-medium text-sm text-muted-foreground mt-2 group-data-[collapsible=icon]:mt-2">
|
|
{{ group.title }}
|
|
</SidebarGroupLabel>
|
|
<SidebarMenu class="font-medium text-base gap-2">
|
|
<SidebarMenuItem v-for="item in group.items" :key="item.title">
|
|
<SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title" class="text-base font-normal">
|
|
<Link prefetch :href="item.href">
|
|
<component :is="item.icon"
|
|
:class="urlIsActive(item.href, page.url) ? 'text-primary' : 'text-sidebar-icon'" />
|
|
<span>{{ item.title }}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
<SidebarMenuAction v-if="item.action">
|
|
<Link prefetch :href="item.action.href">
|
|
<component :is="item.action.icon" class="text-sidebar-icon" size="0.833rem" />
|
|
<span class="sr-only">{{ item.action.title }}</span>
|
|
</Link>
|
|
</SidebarMenuAction>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
|
|
</template>
|