Refactor: Add useActiveUrl composable

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>

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>

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">

resources/js/composables/useActiveUrl.ts

@@ -0,0 +1,28 @@
+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,
+);
+
+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,
+    };
+}

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
                     >

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;
-}