92 lines
3.6 KiB
Vue
92 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import { FolderTree, LayoutDashboard, Users } from '@lucide/vue';
|
|
import { computed } from 'vue';
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarRail,
|
|
} from '@/components/ui/sidebar';
|
|
import { useCan } from '@/composables/useCan';
|
|
|
|
const page = usePage();
|
|
const { can } = useCan();
|
|
|
|
const isDashboardActive = computed(() => page.url.startsWith('/admin/dashboard'));
|
|
const isEmployeesActive = computed(() => page.url.startsWith('/admin/hr/employees'));
|
|
const isCategoriesActive = computed(() => page.url.startsWith('/admin/master/categories'));
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton size="lg" as-child>
|
|
<Link href="/admin/dashboard">
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">{{ page.props.name }}</span>
|
|
</div>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Menu</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton as-child tooltip="Dashboard" :is-active="isDashboardActive">
|
|
<Link href="/admin/dashboard">
|
|
<LayoutDashboard />
|
|
<span>Dashboard</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
<SidebarGroup v-if="can('categories.view')">
|
|
<SidebarGroupLabel>Master</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton as-child tooltip="Kategori" :is-active="isCategoriesActive">
|
|
<Link href="/admin/master/categories">
|
|
<FolderTree />
|
|
<span>Kategori</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
<SidebarGroup v-if="can('employees.view')">
|
|
<SidebarGroupLabel>HR</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton as-child tooltip="Pegawai" :is-active="isEmployeesActive">
|
|
<Link href="/admin/hr/employees">
|
|
<Users />
|
|
<span>Pegawai</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|