feat(DashboardSidebar): reorganize navigation structure and improve accessibility

frontend/src/components/organisms/DashboardSidebar.tsx

@@ -57,10 +57,11 @@ export function DashboardSidebar() {
   return (
     <aside className="flex h-full w-64 flex-col border-r border-slate-200 bg-white">
       <div className="flex-1 px-3 py-4">
-        <p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
+        <p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">Navigation</p>
-          Navigation
+        <nav className="mt-3 space-y-4 text-sm">
-        </p>
+          <div>
-        <nav className="mt-3 space-y-1 text-sm">
+            <p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Overview</p>
+            <div className="mt-1 space-y-1">
               <Link
                 href="/dashboard"
                 className={cn(
@@ -73,20 +74,24 @@ export function DashboardSidebar() {
                 <BarChart3 className="h-4 w-4" />
                 Dashboard
               </Link>
-          {isAdmin ? (
               <Link
-              href="/gateways"
+                href="/activity"
                 className={cn(
                   "flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
-                pathname.startsWith("/gateways")
+                  pathname.startsWith("/activity")
                     ? "bg-blue-100 text-blue-800 font-medium"
                     : "hover:bg-slate-100",
                 )}
               >
-              <Network className="h-4 w-4" />
+                <Activity className="h-4 w-4" />
-              Gateways
+                Live feed
               </Link>
-          ) : null}
+            </div>
+          </div>
+
+          <div>
+            <p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Boards</p>
+            <div className="mt-1 space-y-1">
               <Link
                 href="/board-groups"
                 className={cn(
@@ -123,18 +128,6 @@ export function DashboardSidebar() {
                 <Tags className="h-4 w-4" />
                 Tags
               </Link>
-          <Link
-            href="/organization"
-            className={cn(
-              "flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
-              pathname.startsWith("/organization")
-                ? "bg-blue-100 text-blue-800 font-medium"
-                : "hover:bg-slate-100",
-            )}
-          >
-            <Building2 className="h-4 w-4" />
-            Organization
-          </Link>
               <Link
                 href="/approvals"
                 className={cn(
@@ -147,18 +140,40 @@ export function DashboardSidebar() {
                 <CheckCircle2 className="h-4 w-4" />
                 Approvals
               </Link>
+            </div>
+          </div>
+
+          <div>
+            <p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+              Administration
+            </p>
+            <div className="mt-1 space-y-1">
               <Link
-            href="/activity"
+                href="/organization"
                 className={cn(
                   "flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
-              pathname.startsWith("/activity")
+                  pathname.startsWith("/organization")
                     ? "bg-blue-100 text-blue-800 font-medium"
                     : "hover:bg-slate-100",
                 )}
               >
-            <Activity className="h-4 w-4" />
+                <Building2 className="h-4 w-4" />
-            Live feed
+                Organization
               </Link>
+              {isAdmin ? (
+                <Link
+                  href="/gateways"
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
+                    pathname.startsWith("/gateways")
+                      ? "bg-blue-100 text-blue-800 font-medium"
+                      : "hover:bg-slate-100",
+                  )}
+                >
+                  <Network className="h-4 w-4" />
+                  Gateways
+                </Link>
+              ) : null}
               {isAdmin ? (
                 <Link
                   href="/agents"
@@ -173,6 +188,8 @@ export function DashboardSidebar() {
                   Agents
                 </Link>
               ) : null}
+            </div>
+          </div>
         </nav>
       </div>
       <div className="border-t border-slate-200 p-4">