62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
|
import type { NavItem } from '@/types';
|
|
|
|
defineProps<{
|
|
items: NavItem[];
|
|
label: string;
|
|
}>();
|
|
|
|
const { isCurrentUrl } = useCurrentUrl();
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarGroup class="px-3 py-2">
|
|
<SidebarGroupLabel class="text-label text-muted-foreground uppercase">{{
|
|
label
|
|
}}</SidebarGroupLabel>
|
|
<SidebarMenu role="list" :aria-label="label">
|
|
<SidebarMenuItem v-for="item in items" :key="item.title">
|
|
<SidebarMenuButton
|
|
as-child
|
|
:is-active="
|
|
item.isActive ??
|
|
isCurrentUrl(
|
|
item.href,
|
|
undefined,
|
|
item.match === 'section',
|
|
)
|
|
"
|
|
:tooltip="item.title"
|
|
class="min-h-control data-[active=true]:border-brand border-l-2 border-transparent px-3 data-[active=true]:font-semibold group-data-[collapsible=icon]:min-h-8"
|
|
>
|
|
<Link
|
|
:href="item.href"
|
|
:aria-current="
|
|
(item.isActive ??
|
|
isCurrentUrl(
|
|
item.href,
|
|
undefined,
|
|
item.match === 'section',
|
|
))
|
|
? 'page'
|
|
: undefined
|
|
"
|
|
>
|
|
<component :is="item.icon" aria-hidden="true" />
|
|
<span>{{ item.title }}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
</template>
|