From 4c78ea819f200856a5792cd573d4bd1e6c986242 Mon Sep 17 00:00:00 2001
From: Godopu <godopu16@gmail.com>
Date: Tue, 25 Aug 2026 15:24:44 +0900
Subject: [PATCH] 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)
---
 refer_landing_page/app/console/layout.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/refer_landing_page/app/console/layout.tsx b/refer_landing_page/app/console/layout.tsx
index b5e9434..525d196 100644
--- a/refer_landing_page/app/console/layout.tsx
+++ b/refer_landing_page/app/console/layout.tsx
@@ -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>