From 7d47109e95d85e40603682f0199f8f61f6140a7f Mon Sep 17 00:00:00 2001
From: Jorge Lapa <2780099+heyjorgedev@users.noreply.github.com>
Date: Mon, 22 Sep 2025 08:27:27 +0100
Subject: [PATCH 1/2] fix header menu selection indicator not showing

---
 resources/js/components/app-header.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/app-header.tsx b/resources/js/components/app-header.tsx
index 6f3ab8fb6..a164139a5 100644
--- a/resources/js/components/app-header.tsx
+++ b/resources/js/components/app-header.tsx
@@ -182,7 +182,10 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                             )}
                                             {item.title}
                                         </Link>
-                                        {page.url === item.href && (
+                                        {page.url ===
+                                            (typeof item.href === 'string'
+                                                ? item.href
+                                                : item.href.url) && (
                                             <div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>
                                         )}
                                     </NavigationMenuItem>

From dd94db290e0235b07ae60fc8f06c5ed86a6aac2f Mon Sep 17 00:00:00 2001
From: Joe Tannenbaum <joe.tannenbaum@laravel.com>
Date: Mon, 20 Oct 2025 13:56:29 -0400
Subject: [PATCH 2/2] isSameUrl and resolveUrl helpers

---
 resources/js/components/app-header.tsx   | 31 ++++++------------------
 resources/js/components/nav-footer.tsx   |  7 ++----
 resources/js/components/nav-main.tsx     |  5 ++--
 resources/js/layouts/settings/layout.tsx | 13 +++++-----
 resources/js/lib/utils.ts                | 12 +++++++++
 5 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/resources/js/components/app-header.tsx b/resources/js/components/app-header.tsx
index a164139a5..1f6371926 100644
--- a/resources/js/components/app-header.tsx
+++ b/resources/js/components/app-header.tsx
@@ -28,7 +28,7 @@ import {
 } from '@/components/ui/tooltip';
 import { UserMenuContent } from '@/components/user-menu-content';
 import { useInitials } from '@/hooks/use-initials';
-import { cn } from '@/lib/utils';
+import { cn, isSameUrl, resolveUrl } from '@/lib/utils';
 import { dashboard } from '@/routes';
 import { type BreadcrumbItem, type NavItem, type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
@@ -118,12 +118,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                             {rightNavItems.map((item) => (
                                                 <a
                                                     key={item.title}
-                                                    href={
-                                                        typeof item.href ===
-                                                        'string'
-                                                            ? item.href
-                                                            : item.href.url
-                                                    }
+                                                    href={resolveUrl(item.href)}
                                                     target="_blank"
                                                     rel="noopener noreferrer"
                                                     className="flex items-center space-x-2 font-medium"
@@ -165,12 +160,10 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                             href={item.href}
                                             className={cn(
                                                 navigationMenuTriggerStyle(),
-                                                page.url ===
-                                                    (typeof item.href ===
-                                                    'string'
-                                                        ? item.href
-                                                        : item.href.url) &&
-                                                    activeItemStyles,
+                                                isSameUrl(
+                                                    page.url,
+                                                    item.href,
+                                                ) && activeItemStyles,
                                                 'h-9 cursor-pointer px-3',
                                             )}
                                         >
@@ -182,10 +175,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                             )}
                                             {item.title}
                                         </Link>
-                                        {page.url ===
-                                            (typeof item.href === 'string'
-                                                ? item.href
-                                                : item.href.url) && (
+                                        {isSameUrl(page.url, item.href) && (
                                             <div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>
                                         )}
                                     </NavigationMenuItem>
@@ -212,12 +202,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                         <Tooltip>
                                             <TooltipTrigger>
                                                 <a
-                                                    href={
-                                                        typeof item.href ===
-                                                        'string'
-                                                            ? item.href
-                                                            : item.href.url
-                                                    }
+                                                    href={resolveUrl(item.href)}
                                                     target="_blank"
                                                     rel="noopener noreferrer"
                                                     className="group ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
diff --git a/resources/js/components/nav-footer.tsx b/resources/js/components/nav-footer.tsx
index 1f21036d8..00aa4d3cf 100644
--- a/resources/js/components/nav-footer.tsx
+++ b/resources/js/components/nav-footer.tsx
@@ -6,6 +6,7 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
+import { resolveUrl } from '@/lib/utils';
 import { type NavItem } from '@/types';
 import { type ComponentPropsWithoutRef } from 'react';
 
@@ -30,11 +31,7 @@ export function NavFooter({
                                 className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
                             >
                                 <a
-                                    href={
-                                        typeof item.href === 'string'
-                                            ? item.href
-                                            : item.href.url
-                                    }
+                                    href={resolveUrl(item.href)}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                 >
diff --git a/resources/js/components/nav-main.tsx b/resources/js/components/nav-main.tsx
index a1c574cac..61a134232 100644
--- a/resources/js/components/nav-main.tsx
+++ b/resources/js/components/nav-main.tsx
@@ -5,6 +5,7 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
+import { resolveUrl } from '@/lib/utils';
 import { type NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 
@@ -19,9 +20,7 @@ export function NavMain({ items = [] }: { items: NavItem[] }) {
                         <SidebarMenuButton
                             asChild
                             isActive={page.url.startsWith(
-                                typeof item.href === 'string'
-                                    ? item.href
-                                    : item.href.url,
+                                resolveUrl(item.href),
                             )}
                             tooltip={{ children: item.title }}
                         >
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
index c128d82c5..b51813b9f 100644
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@@ -1,7 +1,7 @@
 import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib/utils';
+import { cn, isSameUrl, resolveUrl } from '@/lib/utils';
 import { edit as editAppearance } from '@/routes/appearance';
 import { edit as editPassword } from '@/routes/password';
 import { edit } from '@/routes/profile';
@@ -53,16 +53,15 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
                     <nav className="flex flex-col space-y-1 space-x-0">
                         {sidebarNavItems.map((item, index) => (
                             <Button
-                                key={`${typeof item.href === 'string' ? item.href : item.href.url}-${index}`}
+                                key={`${resolveUrl(item.href)}-${index}`}
                                 size="sm"
                                 variant="ghost"
                                 asChild
                                 className={cn('w-full justify-start', {
-                                    'bg-muted':
-                                        currentPath ===
-                                        (typeof item.href === 'string'
-                                            ? item.href
-                                            : item.href.url),
+                                    'bg-muted': isSameUrl(
+                                        currentPath,
+                                        item.href,
+                                    ),
                                 })}
                             >
                                 <Link href={item.href}>
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
index dd53ea892..61fbf3a3e 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -1,6 +1,18 @@
+import { InertiaLinkProps } from '@inertiajs/react';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function isSameUrl(
+    url1: NonNullable<InertiaLinkProps['href']>,
+    url2: NonNullable<InertiaLinkProps['href']>,
+) {
+    return resolveUrl(url1) === resolveUrl(url2);
+}
+
+export function resolveUrl(url: NonNullable<InertiaLinkProps['href']>): string {
+    return typeof url === 'string' ? url : url.url;
+}