Skip to content

Commit 77e9e2a

Browse files
joetannenbaumjoetannenbaum
authored
Merge pull request #170 from heyjorgedev/fix-menu-selection-indicator
fix header menu selection indicator not showing
2 parents bdae510 + dd94db2 commit 77e9e2a

File tree

5 files changed

+30
-35
lines changed

5 files changed

+30
-35
lines changed

‎resources/js/components/app-header.tsx‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
} from '@/components/ui/tooltip';
2929
import { UserMenuContent } from '@/components/user-menu-content';
3030
import { useInitials } from '@/hooks/use-initials';
31-
import { cn } from '@/lib/utils';
31+
import { cn, isSameUrl, resolveUrl } from '@/lib/utils';
3232
import { dashboard } from '@/routes';
3333
import { type BreadcrumbItem, type NavItem, type SharedData } from '@/types';
3434
import { Link, usePage } from '@inertiajs/react';
@@ -118,12 +118,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
118118
{rightNavItems.map((item) => (
119119
<a
120120
key={item.title}
121-
href={
122-
typeof item.href ===
123-
'string'
124-
? item.href
125-
: item.href.url
126-
}
121+
href={resolveUrl(item.href)}
127122
target="_blank"
128123
rel="noopener noreferrer"
129124
className="flex items-center space-x-2 font-medium"
@@ -165,12 +160,10 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
165160
href={item.href}
166161
className={cn(
167162
navigationMenuTriggerStyle(),
168-
page.url ===
169-
(typeof item.href ===
170-
'string'
171-
? item.href
172-
: item.href.url) &&
173-
activeItemStyles,
163+
isSameUrl(
164+
page.url,
165+
item.href,
166+
) && activeItemStyles,
174167
'h-9 cursor-pointer px-3',
175168
)}
176169
>
@@ -182,7 +175,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
182175
)}
183176
{item.title}
184177
</Link>
185-
{page.url === item.href && (
178+
{isSameUrl(page.url, item.href) && (
186179
<div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>
187180
)}
188181
</NavigationMenuItem>
@@ -209,12 +202,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
209202
<Tooltip>
210203
<TooltipTrigger>
211204
<a
212-
href={
213-
typeof item.href ===
214-
'string'
215-
? item.href
216-
: item.href.url
217-
}
205+
href={resolveUrl(item.href)}
218206
target="_blank"
219207
rel="noopener noreferrer"
220208
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"

‎resources/js/components/nav-footer.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
SidebarMenuButton,
77
SidebarMenuItem,
88
} from '@/components/ui/sidebar';
9+
import { resolveUrl } from '@/lib/utils';
910
import { type NavItem } from '@/types';
1011
import { type ComponentPropsWithoutRef } from 'react';
1112

@@ -30,11 +31,7 @@ export function NavFooter({
3031
className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
3132
>
3233
<a
33-
href={
34-
typeof item.href === 'string'
35-
? item.href
36-
: item.href.url
37-
}
34+
href={resolveUrl(item.href)}
3835
target="_blank"
3936
rel="noopener noreferrer"
4037
>

‎resources/js/components/nav-main.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
SidebarMenuButton,
66
SidebarMenuItem,
77
} from '@/components/ui/sidebar';
8+
import { resolveUrl } from '@/lib/utils';
89
import { type NavItem } from '@/types';
910
import { Link, usePage } from '@inertiajs/react';
1011

@@ -19,9 +20,7 @@ export function NavMain({ items = [] }: { items: NavItem[] }) {
1920
<SidebarMenuButton
2021
asChild
2122
isActive={page.url.startsWith(
22-
typeof item.href === 'string'
23-
? item.href
24-
: item.href.url,
23+
resolveUrl(item.href),
2524
)}
2625
tooltip={{ children: item.title }}
2726
>

‎resources/js/layouts/settings/layout.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Heading from '@/components/heading';
22
import { Button } from '@/components/ui/button';
33
import { Separator } from '@/components/ui/separator';
4-
import { cn } from '@/lib/utils';
4+
import { cn, isSameUrl, resolveUrl } from '@/lib/utils';
55
import { edit as editAppearance } from '@/routes/appearance';
66
import { edit } from '@/routes/profile';
77
import { show } from '@/routes/two-factor';
@@ -53,16 +53,15 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
5353
<nav className="flex flex-col space-y-1 space-x-0">
5454
{sidebarNavItems.map((item, index) => (
5555
<Button
56-
key={`${typeof item.href === 'string' ? item.href : item.href.url}-${index}`}
56+
key={`${resolveUrl(item.href)}-${index}`}
5757
size="sm"
5858
variant="ghost"
5959
asChild
6060
className={cn('w-full justify-start', {
61-
'bg-muted':
62-
currentPath ===
63-
(typeof item.href === 'string'
64-
? item.href
65-
: item.href.url),
61+
'bg-muted': isSameUrl(
62+
currentPath,
63+
item.href,
64+
),
6665
})}
6766
>
6867
<Link href={item.href}>

‎resources/js/lib/utils.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
1+
import { InertiaLinkProps } from '@inertiajs/react';
12
import { type ClassValue, clsx } from 'clsx';
23
import { twMerge } from 'tailwind-merge';
34

45
export function cn(...inputs: ClassValue[]) {
56
return twMerge(clsx(inputs));
67
}
8+
9+
export function isSameUrl(
10+
url1: NonNullable<InertiaLinkProps['href']>,
11+
url2: NonNullable<InertiaLinkProps['href']>,
12+
) {
13+
return resolveUrl(url1) === resolveUrl(url2);
14+
}
15+
16+
export function resolveUrl(url: NonNullable<InertiaLinkProps['href']>): string {
17+
return typeof url === 'string' ? url : url.url;
18+
}

0 commit comments

Comments
 (0)