From eea4a6d6c569510b45f83dd52d41791d7c9b0e9d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 15:46:59 +0700
Subject: [PATCH] refactor: update MobileBottomNav component to filter
 navigation items based on permissions; enhance visibility logic for improved
 user experience

---
 resources/js/components/MobileBottomNav.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/MobileBottomNav.vue b/resources/js/components/MobileBottomNav.vue
index b2f292a..1144413 100644
--- a/resources/js/components/MobileBottomNav.vue
+++ b/resources/js/components/MobileBottomNav.vue
@@ -1,6 +1,7 @@
 <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';
 
@@ -43,6 +44,10 @@ const navItems: NavItem[] = [
     },
 ];
 
+const visibleItems = computed(() => {
+    return navItems.filter((item) => !item.permission || can(item.permission));
+});
+
 function isActive(href: string): boolean {
     return page.url.startsWith(href);
 }
@@ -57,11 +62,11 @@ function badgeCount(item: NavItem): number {
 </script>
 
 <template>
-    <nav class="pointer-events-none fixed inset-x-0 bottom-0 z-50 flex justify-center pb-4 lg:hidden">
+    <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 navItems" :key="item.title">
-                <Link v-if="!item.permission || can(item.permission)" :href="item.href"
+            <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),