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

- 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:
2026-08-25 15:24:44 +09:00
parent 5285e3fd02
commit 4c78ea819f
+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> <p className="text-xs text-ink/60 mt-1">Lab Data Management</p>
</div> </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) => { {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 ( return (
<Link <Link
key={item.href} key={item.href}
href={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 isActive
? "bg-cobalt text-white" ? "bg-cobalt text-white shadow-sm font-semibold"
: "text-ink/80 hover:bg-ivory hover:text-ink" : "text-ink/80 hover:bg-cobalt/10 hover:text-cobalt dark:hover:bg-cobalt/20 dark:hover:text-cobalt-light"
}`} }`}
> >
{item.label} {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"> <div className="p-4 border-t border-line space-y-2 shrink-0 bg-paper">
<Link <Link
href="/" 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 &larr; Return to Public Site
</Link> </Link>