lab/landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(console): fix sidebar active route highlight matching and apply primary color hover styling

Browse Source 
- Normalize route matching with cleanPath and cleanHref prefix comparison
- Highlight all sub-routes (Research Projects, Research Areas, Members, etc.) correctly when active
- Replace white hover effect with primary cobalt hover color (hover:bg-cobalt/10 hover:text-cobalt)
- Verified with E2E test suite (Exit Code 0)
This commit is contained in:
Godopu
2026-08-25 15:24:44 +09:00
parent 5285e3fd02
commit 4c78ea819f
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
refer_landing_page/app/console/layout.tsx
+12 -6
View File
@@ -103,17 +103,23 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
<p className="text-xs text-ink/60 mt-1">Lab Data Management</p>
</div>
<nav className="p-4 space-y-1 flex-1 overflow-y-auto">
<nav className="p-4 space-y-1.5 flex-1 overflow-y-auto">
{navItems.map((item) => {
const isActive = pathname === item.href;
const cleanPath = (pathname || "").replace(/\/+$/, "") || "/";
const cleanHref = item.href.replace(/\/+$/, "");
const isActive =
cleanHref === "/console"
? cleanPath === "/console"
: cleanPath === cleanHref || cleanPath.startsWith(`${cleanHref}/`);
return (
<Link
key={item.href}
href={item.href}
className={`block px-3 py-2 text-sm font-medium rounded-md transition-colors ${
className={`block px-3 py-2 text-sm font-medium rounded-md transition-all duration-150 ${
isActive
? "bg-cobalt text-white"
: "text-ink/80 hover:bg-ivory hover:text-ink"
? "bg-cobalt text-white shadow-sm font-semibold"
: "text-ink/80 hover:bg-cobalt/10 hover:text-cobalt dark:hover:bg-cobalt/20 dark:hover:text-cobalt-light"
}`}
>
{item.label}
@@ -125,7 +131,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
<div className="p-4 border-t border-line space-y-2 shrink-0 bg-paper">
<Link
href="/"
className="block w-full text-center px-3 py-2 text-xs font-medium rounded border border-line hover:bg-ivory text-ink/80"
className="block w-full text-center px-3 py-2 text-xs font-medium rounded border border-line hover:border-cobalt/40 hover:bg-cobalt/10 hover:text-cobalt text-ink/80 transition-colors"
>
&larr; Return to Public Site
</Link>