132 lines
6.1 KiB
Vue
132 lines
6.1 KiB
Vue
<script setup lang="ts">
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import { FolderTree, Layers, LayoutDashboard, Package, User, UserCheck, 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'));
|
|
const isProductsActive = computed(() => page.url.startsWith('/admin/master/products'));
|
|
const isRawMaterialsActive = computed(() => page.url.startsWith('/admin/master/raw-materials'));
|
|
const isSuppliersActive = computed(() => page.url.startsWith('/admin/master/suppliers'));
|
|
const isCustomersActive = computed(() => page.url.startsWith('/admin/master/customers'));
|
|
const showMasterMenu = computed(() => (
|
|
can('categories.view') || can('products.view') || can('raw-materials.view')
|
|
|| can('suppliers.view') || can('customers.view')
|
|
));
|
|
</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="showMasterMenu">
|
|
<SidebarGroupLabel>Master</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem v-if="can('categories.view')">
|
|
<SidebarMenuButton as-child tooltip="Kategori" :is-active="isCategoriesActive">
|
|
<Link href="/admin/master/categories">
|
|
<FolderTree />
|
|
<span>Kategori</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem v-if="can('products.view')">
|
|
<SidebarMenuButton as-child tooltip="Produk" :is-active="isProductsActive">
|
|
<Link href="/admin/master/products">
|
|
<Package />
|
|
<span>Produk</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem v-if="can('raw-materials.view')">
|
|
<SidebarMenuButton as-child tooltip="Bahan Baku" :is-active="isRawMaterialsActive">
|
|
<Link href="/admin/master/raw-materials">
|
|
<Layers />
|
|
<span>Bahan Baku</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem v-if="can('suppliers.view')">
|
|
<SidebarMenuButton as-child tooltip="Supplier" :is-active="isSuppliersActive">
|
|
<Link href="/admin/master/suppliers">
|
|
<User />
|
|
<span>Supplier</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem v-if="can('customers.view')">
|
|
<SidebarMenuButton as-child tooltip="Customer" :is-active="isCustomersActive">
|
|
<Link href="/admin/master/customers">
|
|
<UserCheck />
|
|
<span>Customer</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>
|