Add getNavMenuLink function

resources/js/components/AppHeader.vue

@@ -20,6 +20,7 @@ import type { BreadcrumbItem, NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
 import { computed } from 'vue';
+import { getNavItemLink } from '@/lib/utils';
 
 interface Props {
     breadcrumbs?: BreadcrumbItem[];
@@ -82,9 +83,9 @@ const rightNavItems: NavItem[] = [
                                     <Link
                                         v-for="item in mainNavItems"
                                         :key="item.title"
-                                        :href="item.href"
+                                        :href="getNavItemLink(item)"
                                         class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
-                                        :class="activeItemStyles(item.href)"
+                                        :class="activeItemStyles(getNavItemLink(item))"
                                     >
                                         <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
                                         {{ item.title }}
@@ -94,7 +95,7 @@ const rightNavItems: NavItem[] = [
                                     <a
                                         v-for="item in rightNavItems"
                                         :key="item.title"
-                                        :href="item.href"
+                                        :href="getNavItemLink(item)"
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         class="flex items-center space-x-2 text-sm font-medium"
@@ -117,16 +118,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="getNavItemLink(item)">
                                     <NavigationMenuLink
-                                        :class="[navigationMenuTriggerStyle(), activeItemStyles(item.href), 'h-9 cursor-pointer px-3']"
+                                        :class="[navigationMenuTriggerStyle(), activeItemStyles(getNavItemLink(item)), '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(getNavItemLink(item))"
                                     class="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"
                                 ></div>
                             </NavigationMenuItem>
@@ -146,7 +147,7 @@ const rightNavItems: NavItem[] = [
                                     <Tooltip>
                                         <TooltipTrigger>
                                             <Button variant="ghost" size="icon" as-child class="group h-9 w-9 cursor-pointer">
-                                                <a :href="item.href" target="_blank" rel="noopener noreferrer">
+                                                <a :href="getNavItemLink(item)" target="_blank" rel="noopener noreferrer">
                                                     <span class="sr-only">{{ item.title }}</span>
                                                     <component :is="item.icon" class="size-5 opacity-80 group-hover:opacity-100" />
                                                 </a>

resources/js/components/AppSidebarHeader.vue

@@ -3,9 +3,11 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import type { BreadcrumbItemType } from '@/types';
 
-defineProps<{
+withDefaults(defineProps<{
     breadcrumbs?: BreadcrumbItemType[];
-}>();
+}>(),{
+    breadcrumbs:()=>[]
+});
 </script>
 
 <template>

resources/js/components/Breadcrumbs.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
 import { Link } from '@inertiajs/vue3';
+import { getNavItemLink } from '@/lib/utils';
 
 interface BreadcrumbItem {
     title: string;
     href?: string;
+    type?: 'route'|'href';
 }
 
 defineProps<{
@@ -22,7 +24,7 @@ defineProps<{
                     </template>
                     <template v-else>
                         <BreadcrumbLink as-child>
-                            <Link :href="item.href ?? '#'">{{ item.title }}</Link>
+                            <Link :href="getNavItemLink(item) ?? '#'">{{ item.title }}</Link>
                         </BreadcrumbLink>
                     </template>
                 </BreadcrumbItem>

resources/js/components/NavFooter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
+import { getNavItemLink } from '@/lib/utils';
 
 interface Props {
     items: NavItem[];
@@ -16,7 +17,7 @@ defineProps<Props>();
             <SidebarMenu>
                 <SidebarMenuItem v-for="item in items" :key="item.title">
                     <SidebarMenuButton class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100" as-child>
-                        <a :href="item.href" target="_blank" rel="noopener noreferrer">
+                        <a :href="getNavItemLink(item)" target="_blank" rel="noopener noreferrer">
                             <component :is="item.icon" />
                             <span>{{ item.title }}</span>
                         </a>

resources/js/components/NavMain.vue

@@ -2,6 +2,7 @@
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem, type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
+import { getNavItemLink } from '@/lib/utils';
 
 defineProps<{
     items: NavItem[];
@@ -15,11 +16,11 @@ 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
+                    as-child :is-active="getNavItemLink(item) === page.url"
                     :tooltip="item.title"
                 >
-                    <Link :href="item.href">
+                    <Link :href="getNavItemLink(item)">
                         <component :is="item.icon" />
                         <span>{{ item.title }}</span>
                     </Link>

resources/js/layouts/settings/Layout.vue

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { type NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
+import { getNavItemLink } from '@/lib/utils';
 
 const sidebarNavItems: NavItem[] = [
     {
@@ -36,10 +37,10 @@ const currentPath = page.props.ziggy?.location ? new URL(page.props.ziggy.locati
                         v-for="item in sidebarNavItems"
                         :key="item.href"
                         variant="ghost"
-                        :class="['w-full justify-start', { 'bg-muted': currentPath === item.href }]"
+                        :class="['w-full justify-start', { 'bg-muted': currentPath === getNavItemLink(item) }]"
                         as-child
                     >
-                        <Link :href="item.href">
+                        <Link :href="getNavItemLink(item)">
                             {{ item.title }}
                         </Link>
                     </Button>

resources/js/lib/utils.ts

@@ -1,6 +1,12 @@
+import { LinkableItemType } from '@/types';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function getNavItemLink(item:LinkableItemType,defaultValue:string  =  '#') : string{
+    if(!item.href ) return defaultValue;
+    return item.type === 'route' ? route(item.href):item.href;
+}

resources/js/types/index.d.ts

@@ -6,14 +6,23 @@ export interface Auth {
     user: User;
 }
 
+export interface ILinkableItem{
+    href?: string;
+    type?:'href' | 'route';
+}
+
+export type LinkableItemType = ILinkableItem
+
 export interface BreadcrumbItem {
     title: string;
     href: string;
+    type?:'href' | 'route';
 }
 
 export interface NavItem {
     title: string;
     href: string;
+    type?:'href' | 'route';
     icon?: LucideIcon;
     isActive?: boolean;
 }