From 01b70c236951d4c0cc3e9debbf8e9b4be52e32e0 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Mon, 13 Jul 2026 20:29:24 +0200
Subject: [PATCH] Make HK sidebar menu clearly readable and structured

- Strong, obvious active state: accent-tinted background, bold text,
  accent icon and left accent border so the current section is unmistakable
- Inactive items stay fully readable (white on dark) with a clear hover
- Separate nav sections with dividers and bolder uppercase headers
- Fix invisible mobile hamburger hover (bg-black/10 -> accent tint)
---
 src/app/admin/layout.tsx                      |  8 ++++----
 src/components/admin/admin-mobile-wrapper.tsx |  2 +-
 src/components/admin/admin-nav-link.tsx       | 15 ++++++++++-----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index d54e0d09..1c0dc619 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -201,10 +201,10 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
         </div>
       </div>
 
-      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
-        {navGroups.map((group) => (
-          <div key={group.label}>
-            <div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[var(--admin-sidebar-muted-readable)]">
+      <nav className="flex-1 overflow-y-auto px-3 py-4">
+        {navGroups.map((group, gi) => (
+          <div key={group.label} className={gi > 0 ? "mt-4 pt-4 border-t border-[var(--admin-border)]" : ""}>
+            <div className="flex items-center gap-1.5 px-2 pb-2 text-[0.65rem] font-extrabold uppercase tracking-[0.14em] text-[var(--admin-sidebar-text-readable)] opacity-70">
               {group.icon}
               <span>{group.label}</span>
             </div>
diff --git a/src/components/admin/admin-mobile-wrapper.tsx b/src/components/admin/admin-mobile-wrapper.tsx
index 332567c3..407ea92c 100644
--- a/src/components/admin/admin-mobile-wrapper.tsx
+++ b/src/components/admin/admin-mobile-wrapper.tsx
@@ -28,7 +28,7 @@ export function AdminMobileWrapper({
         <button
           type="button"
           onClick={() => setOpen(!open)}
-          className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-black/10"
+          className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-[var(--admin-accent)]/15"
           style={{ color: "var(--admin-text-muted)" }}
         >
           {open ? <X size={18} /> : <Menu size={18} />}
diff --git a/src/components/admin/admin-nav-link.tsx b/src/components/admin/admin-nav-link.tsx
index e47201fa..7bdf01a0 100644
--- a/src/components/admin/admin-nav-link.tsx
+++ b/src/components/admin/admin-nav-link.tsx
@@ -25,20 +25,25 @@ export function AdminNavLink({
   return (
     <Link
       href={href}
-      className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
+      aria-current={active ? "page" : undefined}
+      className={`group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm no-underline transition-all duration-150 ${
         active
-          ? "bg-[var(--admin-accent)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--admin-accent)]"
-          : "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
+          ? "bg-[var(--admin-accent)]/20 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-2 border-[var(--admin-accent)] shadow-sm"
+          : "font-medium text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
       }`}
     >
       {icon ? (
         <span
-          className={`flex-none ${active ? "text-[var(--color-primary-readable)]" : "text-[var(--admin-sidebar-muted-readable)]"}`}
+          className={`flex-none transition-colors ${
+            active
+              ? "text-[var(--admin-accent)]"
+              : "text-[var(--admin-sidebar-text-readable)] opacity-75 group-hover:opacity-100"
+          }`}
         >
           {icon}
         </span>
       ) : null}
-      <span>{children}</span>
+      <span className="truncate">{children}</span>
     </Link>
   );
 }