Refactor navigation links: Introduce getNavItemLink utility function for consistent link handling across components. Update AppHeader, Breadcrumbs, NavFooter, NavMain, and Layout components to utilize the new function. Add LinkableItemType interface to improve type safety for navigation items.

drsoft28 · drsoft28 · commit a7e16fa3efdf · 2025-04-14T18:02:53.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@ yarn-error.log
 /.nova
 /.vscode
 /.zed
+.qodo
diff --git a/resources/js/components/AppHeader.vue b/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>
diff --git a/resources/js/components/Breadcrumbs.vue b/resources/js/components/Breadcrumbs.vue
@@ -1,6 +1,7 @@
 <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;
@@ -22,7 +23,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>
diff --git a/resources/js/components/NavFooter.vue b/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>
diff --git a/resources/js/components/NavMain.vue b/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>
diff --git a/resources/js/layouts/settings/Layout.vue b/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>
diff --git a/resources/js/lib/utils.ts b/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;
+}
diff --git a/resources/js/types/index.d.ts b/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;
 }

-Original file line number
+Diff line change
 /.nova
 /.vscode
 /.zed
 +.qodo