feat(phase-20): navigation, error handling, integration tests, and V2 docs (T-132 to T-135)

frontend/src/components/Sidebar.tsx

@@ -1,34 +1,110 @@
 import { NavLink } from "react-router-dom";
+import { useState } from "react";
 import {
   LayoutDashboard,
   Shield,
   FlaskConical,
   BookOpen,
+  BarChart3,
   Settings,
   Users,
   FileText,
+  ChevronDown,
+  ListChecks,
+  ClipboardList,
 } from "lucide-react";
 import { useAuth } from "../context/AuthContext";
 
-const baseLinks = [
+interface NavItem {
+  to: string;
+  label: string;
+  icon: React.FC<{ className?: string }>;
+  children?: NavItem[];
+}
+
+const mainLinks: NavItem[] = [
   { to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
-  { to: "/techniques", label: "Techniques", icon: Shield },
-  { to: "/tests", label: "Tests", icon: FlaskConical },
-  { to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
+  { to: "/techniques", label: "ATT&CK Matrix", icon: Shield },
+  {
+    to: "/tests",
+    label: "Tests",
+    icon: FlaskConical,
+    children: [
+      { to: "/tests", label: "All Tests", icon: ListChecks },
+      { to: "/tests?view=pending", label: "My Pending Tasks", icon: ClipboardList },
+      { to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
+    ],
+  },
+  { to: "/reports", label: "Reports", icon: BarChart3 },
 ];
 
-const adminLinks = [
+const adminLinks: NavItem[] = [
   { to: "/users", label: "Users", icon: Users },
   { to: "/audit", label: "Audit Log", icon: FileText },
   { to: "/system", label: "System", icon: Settings },
 ];
 
+function SidebarLink({ item }: { item: NavItem }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (item.children) {
+    return (
+      <div>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-800 hover:text-gray-200"
+        >
+          <span className="flex items-center gap-3">
+            <item.icon className="h-5 w-5" />
+            {item.label}
+          </span>
+          <ChevronDown className={`h-4 w-4 transition-transform ${expanded ? "rotate-180" : ""}`} />
+        </button>
+        {expanded && (
+          <div className="ml-4 mt-1 space-y-0.5 border-l border-gray-800 pl-3">
+            {item.children.map((child) => (
+              <NavLink
+                key={child.to + child.label}
+                to={child.to}
+                className={({ isActive }) =>
+                  `flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
+                    isActive
+                      ? "bg-cyan-500/10 text-cyan-400"
+                      : "text-gray-500 hover:bg-gray-800 hover:text-gray-200"
+                  }`
+                }
+              >
+                <child.icon className="h-4 w-4" />
+                {child.label}
+              </NavLink>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <NavLink
+      to={item.to}
+      className={({ isActive }) =>
+        `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+          isActive
+            ? "bg-cyan-500/10 text-cyan-400"
+            : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
+        }`
+      }
+    >
+      <item.icon className="h-5 w-5" />
+      {item.label}
+    </NavLink>
+  );
+}
+
 export default function Sidebar() {
   const { user } = useAuth();
   const isAdmin = user?.role === "admin";
 
-  const links = isAdmin ? [...baseLinks, ...adminLinks] : baseLinks;
-
   return (
     <aside className="flex h-screen w-60 flex-col border-r border-gray-800 bg-gray-900">
       {/* Logo */}
@@ -39,24 +115,24 @@ export default function Sidebar() {
         </span>
       </div>
 
-      {/* Nav links */}
+      {/* Main nav */}
       <nav className="flex-1 space-y-1 px-3 py-4">
-        {links.map(({ to, label, icon: Icon }) => (
-          <NavLink
-            key={to}
-            to={to}
-            className={({ isActive }) =>
-              `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
-                isActive
-                  ? "bg-cyan-500/10 text-cyan-400"
-                  : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
-              }`
-            }
-          >
-            <Icon className="h-5 w-5" />
-            {label}
-          </NavLink>
+        {mainLinks.map((item) => (
+          <SidebarLink key={item.to + item.label} item={item} />
         ))}
+
+        {/* Admin section */}
+        {isAdmin && (
+          <>
+            <div className="my-3 border-t border-gray-800" />
+            <p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-widest text-gray-600">
+              Administration
+            </p>
+            {adminLinks.map((item) => (
+              <SidebarLink key={item.to} item={item} />
+            ))}
+          </>
+        )}
       </nav>
 
       {/* Footer */}