dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update MobileBottomNav component to filter navigation items based on permissions; enhance visibility logic for improved user experience
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (8.3) (push) Waiting to run
Details
tests / ci (8.4) (push) Waiting to run
Details
tests / ci (8.5) (push) Waiting to run
Details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-05 15:46:59 +07:00
parent 58e676e2e1
commit eea4a6d6c5
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/components/MobileBottomNav.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3'; import { Link, usePage } from '@inertiajs/vue3';
import { CalendarDays, Clock, ShoppingBag, ShoppingCart } from '@lucide/vue'; import { CalendarDays, Clock, ShoppingBag, ShoppingCart } from '@lucide/vue';
import { computed } from 'vue';
import { useCan } from '@/composables/useCan'; import { useCan } from '@/composables/useCan';
import admin from '@/routes/admin'; 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 { function isActive(href: string): boolean {
return page.url.startsWith(href); return page.url.startsWith(href);
} }
@ -57,11 +62,11 @@ function badgeCount(item: NavItem): number {
</script> </script>
<template> <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 <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"> 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"> <template v-for="item in visibleItems" :key="item.title">
<Link v-if="!item.permission || can(item.permission)" :href="item.href" <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="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="{ :class="{
'text-primary scale-110 drop-shadow-md': isActive(item.href), 'text-primary scale-110 drop-shadow-md': isActive(item.href),