From 734c5a498aa450ce3092b7a8276a3803d9b1dfb5 Mon Sep 17 00:00:00 2001
From: Bashar Alhato <basharhato2001@gmail.com>
Date: Fri, 4 Apr 2025 08:25:07 +0200
Subject: [PATCH] Fix active links

---
 resources/js/components/AppHeader.vue  | 37 +++++++++++++++-----------
 resources/js/components/AppSidebar.vue |  5 +++-
 resources/js/components/NavMain.vue    |  5 ++--
 resources/js/types/index.d.ts          |  2 ++
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 84902b2e..ab71a079 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -32,29 +32,33 @@ const props = withDefaults(defineProps<Props>(), {
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
-const isCurrentRoute = computed(() => (url: string) => page.url === url);
+const isCurrentRoute = computed(() => (component: string) => page.component === component);
 
 const activeItemStyles = computed(
-    () => (url: string) => (isCurrentRoute.value(url) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''),
+    () => (component: string) => (isCurrentRoute.value(component) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''),
 );
 
 const mainNavItems: NavItem[] = [
     {
         title: 'Dashboard',
         href: '/dashboard',
+        component: 'Dashboard',
         icon: LayoutGrid,
-    },
+        // when: !!auth.value.user, // to show/hide when on a condition
+    }
 ];
 
 const rightNavItems: NavItem[] = [
     {
         title: 'Repository',
         href: 'https://github.com/laravel/vue-starter-kit',
+        component: null,
         icon: Folder,
     },
     {
         title: 'Documentation',
         href: 'https://laravel.com/docs/starter-kits',
+        component: null,
         icon: BookOpen,
     },
 ];
@@ -79,16 +83,17 @@ const rightNavItems: NavItem[] = [
                             </SheetHeader>
                             <div class="flex h-full flex-1 flex-col justify-between space-y-4 py-6">
                                 <nav class="-mx-3 space-y-1">
-                                    <Link
-                                        v-for="item in mainNavItems"
-                                        :key="item.title"
-                                        :href="item.href"
-                                        class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
-                                        :class="activeItemStyles(item.href)"
-                                    >
-                                        <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
-                                        {{ item.title }}
-                                    </Link>
+                                    <template v-for="item in mainNavItems" :key="item.title">
+                                        <Link
+                                            v-if="item.when ?? true"
+                                            :href="item.href"
+                                            class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
+                                            :class="activeItemStyles(item.component ?? '')"
+                                        >
+                                            <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
+                                            {{ item.title }}
+                                        </Link>
+                                    </template>
                                 </nav>
                                 <div class="flex flex-col space-y-4">
                                     <a
@@ -117,16 +122,16 @@ const rightNavItems: NavItem[] = [
                     <NavigationMenu class="ml-10 flex h-full items-stretch">
                         <NavigationMenuList class="flex h-full items-stretch space-x-2">
                             <NavigationMenuItem v-for="(item, index) in mainNavItems" :key="index" class="relative flex h-full items-center">
-                                <Link :href="item.href">
+                                <Link :href="item.href" v-if="item.when ?? true">
                                     <NavigationMenuLink
-                                        :class="[navigationMenuTriggerStyle(), activeItemStyles(item.href), 'h-9 cursor-pointer px-3']"
+                                        :class="[navigationMenuTriggerStyle(), activeItemStyles(item.component ?? ''), 'h-9 cursor-pointer px-3']"
                                     >
                                         <component v-if="item.icon" :is="item.icon" class="mr-2 h-4 w-4" />
                                         {{ item.title }}
                                     </NavigationMenuLink>
                                 </Link>
                                 <div
-                                    v-if="isCurrentRoute(item.href)"
+                                    v-if="isCurrentRoute(item.component ?? '')"
                                     class="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"
                                 ></div>
                             </NavigationMenuItem>
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 3ac41042..f7077d57 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -12,19 +12,22 @@ const mainNavItems: NavItem[] = [
     {
         title: 'Dashboard',
         href: '/dashboard',
+        component: 'Dashboard',
         icon: LayoutGrid,
-    },
+    }
 ];
 
 const footerNavItems: NavItem[] = [
     {
         title: 'Github Repo',
         href: 'https://github.com/laravel/vue-starter-kit',
+        component: null,
         icon: Folder,
     },
     {
         title: 'Documentation',
         href: 'https://laravel.com/docs/starter-kits',
+        component: null,
         icon: BookOpen,
     },
 ];
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index 8aa7d240..13ad9b98 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -15,8 +15,9 @@ const page = usePage<SharedData>();
         <SidebarGroupLabel>Platform</SidebarGroupLabel>
         <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton 
-                    as-child :is-active="item.href === page.url"
+                <SidebarMenuButton
+                    v-if="item.when ?? true"
+                    as-child :is-active="item.component === page.component"
                     :tooltip="item.title"
                 >
                     <Link :href="item.href">
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 8a53a5a4..53ade658 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -14,7 +14,9 @@ export interface BreadcrumbItem {
 export interface NavItem {
     title: string;
     href: string;
+    component: string | null;
     icon?: LucideIcon;
+    when?: boolean;
     isActive?: boolean;
 }