90 lines
3.0 KiB
Vue
90 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import { CalendarDays, Clock, ShoppingBag, ShoppingCart } from '@lucide/vue';
|
|
import { computed } from 'vue';
|
|
import { useCan } from '@/composables/useCan';
|
|
import admin from '@/routes/admin';
|
|
|
|
const page = usePage();
|
|
const { can } = useCan();
|
|
|
|
interface NavItem {
|
|
title: string;
|
|
href: string;
|
|
icon: any;
|
|
permission?: string;
|
|
badgeKey?: 'pendingLeaveRequests' | 'pendingCuttings';
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{
|
|
title: 'Belanja',
|
|
href: admin.manage.purchases.index.url(),
|
|
icon: ShoppingBag,
|
|
permission: 'purchases.view',
|
|
},
|
|
{
|
|
title: 'Pesanan',
|
|
href: admin.manage.orders.index.url(),
|
|
icon: ShoppingCart,
|
|
permission: 'orders.view',
|
|
},
|
|
{
|
|
title: 'Presensi',
|
|
href: admin.hr.attendances.index.url(),
|
|
icon: Clock,
|
|
permission: 'attendances.view',
|
|
},
|
|
{
|
|
title: 'Cuti',
|
|
href: admin.hr.leave_requests.index.url(),
|
|
icon: CalendarDays,
|
|
permission: 'leave_requests.view',
|
|
badgeKey: 'pendingLeaveRequests',
|
|
},
|
|
];
|
|
|
|
const visibleItems = computed(() => {
|
|
return navItems.filter((item) => !item.permission || can(item.permission));
|
|
});
|
|
|
|
function isActive(href: string): boolean {
|
|
return page.url.startsWith(href);
|
|
}
|
|
|
|
function badgeCount(item: NavItem): number {
|
|
if (!item.badgeKey) {
|
|
return 0;
|
|
}
|
|
|
|
return (page.props as any)[item.badgeKey] ?? 0;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav v-if="visibleItems.length > 0" class="pointer-events-none fixed inset-x-0 bottom-0 z-50 flex justify-center pb-4 lg:hidden">
|
|
<div
|
|
class="pointer-events-auto flex items-center gap-1 rounded-2xl border bg-background/95 px-2 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/80">
|
|
<template v-for="item in visibleItems" :key="item.title">
|
|
<Link :href="item.href"
|
|
class="relative flex flex-col items-center gap-0.5 rounded-xl px-3.5 py-1.5 text-[11px] font-medium text-muted-foreground transition-all duration-200"
|
|
:class="{
|
|
'text-primary scale-110 drop-shadow-md': isActive(item.href),
|
|
'hover:text-foreground': !isActive(item.href),
|
|
}">
|
|
<div class="relative">
|
|
<component :is="item.icon" class="h-5 w-5 transition-all duration-200" :class="{
|
|
'stroke-[2.5px]': isActive(item.href),
|
|
}" />
|
|
<span v-if="badgeCount(item) > 0"
|
|
class="absolute -right-2.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground">
|
|
{{ badgeCount(item) }}
|
|
</span>
|
|
</div>
|
|
<span>{{ item.title }}</span>
|
|
</Link>
|
|
</template>
|
|
</div>
|
|
</nav>
|
|
</template>
|