From 5ce624d7f2df48992dd9e4df00c25659151a8e63 Mon Sep 17 00:00:00 2001
From: Javier Reyes <javier.reys@gmail.com>
Date: Sat, 1 Nov 2025 13:06:40 +0100
Subject: [PATCH 1/3] feat: add useActiveUrl composable for active URL
 management

---
 resources/js/composables/useActiveUrl.ts | 26 ++++++++++++++++++++++++
 resources/js/lib/utils.ts                | 12 -----------
 2 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/composables/useActiveUrl.ts

diff --git a/resources/js/composables/useActiveUrl.ts b/resources/js/composables/useActiveUrl.ts
new file mode 100644
index 00000000..11626bc7
--- /dev/null
+++ b/resources/js/composables/useActiveUrl.ts
@@ -0,0 +1,26 @@
+import { usePage } from '@inertiajs/vue3';
+import type { InertiaLinkProps } from '@inertiajs/vue3';
+import { computed, readonly } from 'vue';
+
+const page = usePage()
+const currentUrlReactive = computed(()=> new URL(page.url, window?.location.origin).pathname);
+
+function toUrl(href: NonNullable<InertiaLinkProps['href']>) {
+    return typeof href === 'string' ? href : href?.url;
+}
+
+export function useActiveUrl(){
+     function urlIsActive(
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
+    ) {
+        const urlToCompare = currentUrl ?? currentUrlReactive.value;
+        return toUrl(urlToCheck) === urlToCompare;
+    }
+
+    return {
+        currentUrl: readonly(currentUrlReactive),
+        urlIsActive,
+        toUrl
+    }
+ }
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
index fdee36a6..3877c89f 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -1,18 +1,6 @@
-import { InertiaLinkProps } from '@inertiajs/vue3';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
-
-export function urlIsActive(
-    urlToCheck: NonNullable<InertiaLinkProps['href']>,
-    currentUrl: string,
-) {
-    return toUrl(urlToCheck) === currentUrl;
-}
-
-export function toUrl(href: NonNullable<InertiaLinkProps['href']>) {
-    return typeof href === 'string' ? href : href?.url;
-}

From 7773ef896a889d03a89744ebf0664278f07e3cb5 Mon Sep 17 00:00:00 2001
From: Javier Reyes <javier.reys@gmail.com>
Date: Sat, 1 Nov 2025 13:26:40 +0100
Subject: [PATCH 2/3] feat: refactor navigation components to use useActiveUrl
 composable for URL management

---
 resources/js/components/AppHeader.vue    | 24 ++++++++++--------------
 resources/js/components/NavFooter.vue    |  4 +++-
 resources/js/components/NavMain.vue      |  8 ++++----
 resources/js/layouts/settings/Layout.vue |  6 +++---
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 40e454f8..0dc05e43 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -29,11 +29,12 @@ import {
     TooltipTrigger,
 } from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
+import { useActiveUrl } from '@/composables/useActiveUrl';
 import { getInitials } from '@/composables/useInitials';
-import { toUrl, urlIsActive } from '@/lib/utils';
 import { dashboard } from '@/routes';
 import type { BreadcrumbItem, NavItem } from '@/types';
-import { InertiaLinkProps, Link, usePage } from '@inertiajs/vue3';
+import type { InertiaLinkProps } from '@inertiajs/vue3';
+import { Link, usePage } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
 import { computed } from 'vue';
 
@@ -47,18 +48,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const page = usePage();
 const auth = computed(() => page.props.auth);
+const { urlIsActive, toUrl } = useActiveUrl();
 
-const isCurrentRoute = computed(
-    () => (url: NonNullable<InertiaLinkProps['href']>) =>
-        urlIsActive(url, page.url),
-);
-
-const activeItemStyles = computed(
-    () => (url: NonNullable<InertiaLinkProps['href']>) =>
-        isCurrentRoute.value(toUrl(url))
-            ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
-            : '',
-);
+function activeItemStyles(url: NonNullable<InertiaLinkProps['href']>) {
+    return urlIsActive(url)
+        ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
+        : '';
+}
 
 const mainNavItems: NavItem[] = [
     {
@@ -179,7 +175,7 @@ const rightNavItems: NavItem[] = [
                                     {{ item.title }}
                                 </Link>
                                 <div
-                                    v-if="isCurrentRoute(item.href)"
+                                    v-if="urlIsActive(item.href)"
                                     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/NavFooter.vue b/resources/js/components/NavFooter.vue
index 6ae1d5f2..4bf2ceca 100644
--- a/resources/js/components/NavFooter.vue
+++ b/resources/js/components/NavFooter.vue
@@ -6,7 +6,7 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
-import { toUrl } from '@/lib/utils';
+import { useActiveUrl } from '@/composables/useActiveUrl';
 import { type NavItem } from '@/types';
 
 interface Props {
@@ -15,6 +15,8 @@ interface Props {
 }
 
 defineProps<Props>();
+
+const { toUrl } = useActiveUrl();
 </script>
 
 <template>
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index ab7cab23..88741832 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -6,15 +6,15 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
-import { urlIsActive } from '@/lib/utils';
+import { useActiveUrl } from '@/composables/useActiveUrl';
 import { type NavItem } from '@/types';
-import { Link, usePage } from '@inertiajs/vue3';
+import { Link } from '@inertiajs/vue3';
 
 defineProps<{
     items: NavItem[];
 }>();
 
-const page = usePage();
+const { urlIsActive } = useActiveUrl();
 </script>
 
 <template>
@@ -24,7 +24,7 @@ const page = usePage();
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton
                     as-child
-                    :is-active="urlIsActive(item.href, page.url)"
+                    :is-active="urlIsActive(item.href)"
                     :tooltip="item.title"
                 >
                     <Link :href="item.href">
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index a3eab3dd..3d14d3f1 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -2,7 +2,7 @@
 import Heading from '@/components/Heading.vue';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import { toUrl, urlIsActive } from '@/lib/utils';
+import { useActiveUrl } from '@/composables/useActiveUrl';
 import { edit as editAppearance } from '@/routes/appearance';
 import { edit as editProfile } from '@/routes/profile';
 import { show } from '@/routes/two-factor';
@@ -29,7 +29,7 @@ const sidebarNavItems: NavItem[] = [
     },
 ];
 
-const currentPath = typeof window !== undefined ? window.location.pathname : '';
+const { toUrl, urlIsActive } = useActiveUrl();
 </script>
 
 <template>
@@ -48,7 +48,7 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
                         variant="ghost"
                         :class="[
                             'w-full justify-start',
-                            { 'bg-muted': urlIsActive(item.href, currentPath) },
+                            { 'bg-muted': urlIsActive(item.href) },
                         ]"
                         as-child
                     >

From ead0b92ddb4091eaefbb51eed2b8067611bf42ca Mon Sep 17 00:00:00 2001
From: Javier Reyes <javier.reys@gmail.com>
Date: Sat, 1 Nov 2025 14:07:05 +0100
Subject: [PATCH 3/3] chore: run lint and prettier

---
 resources/js/composables/useActiveUrl.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/resources/js/composables/useActiveUrl.ts b/resources/js/composables/useActiveUrl.ts
index 11626bc7..a5f4c1a9 100644
--- a/resources/js/composables/useActiveUrl.ts
+++ b/resources/js/composables/useActiveUrl.ts
@@ -1,16 +1,18 @@
-import { usePage } from '@inertiajs/vue3';
 import type { InertiaLinkProps } from '@inertiajs/vue3';
+import { usePage } from '@inertiajs/vue3';
 import { computed, readonly } from 'vue';
 
-const page = usePage()
-const currentUrlReactive = computed(()=> new URL(page.url, window?.location.origin).pathname);
+const page = usePage();
+const currentUrlReactive = computed(
+    () => new URL(page.url, window?.location.origin).pathname,
+);
 
 function toUrl(href: NonNullable<InertiaLinkProps['href']>) {
     return typeof href === 'string' ? href : href?.url;
 }
 
-export function useActiveUrl(){
-     function urlIsActive(
+export function useActiveUrl() {
+    function urlIsActive(
         urlToCheck: NonNullable<InertiaLinkProps['href']>,
         currentUrl?: string,
     ) {
@@ -21,6 +23,6 @@ export function useActiveUrl(){
     return {
         currentUrl: readonly(currentUrlReactive),
         urlIsActive,
-        toUrl
-    }
- }
+        toUrl,
+    };
+}