feat(admin): grouped sidebar IA

2026-06-17 00:13:28 -06:00
parent 750efdd318
commit 4ded68cec2
2 changed files with 380 additions and 330 deletions
@@ -0,0 +1,49 @@
+import React from "react";
+
+/**
+ * SideNavGroup — a presentational wrapper that renders an optional group
+ * label (10px uppercase, tracking-widest) and a hairline divider, then
+ * passes the nav item children through unchanged.
+ *
+ * Used by AdminSidebar to chunk the long list of admin links into the
+ * 7 IA groups defined in `docs/superpowers/specs/2026-06-17-admin-redesign.md`
+ * (Workspace · Operations · Communications · Growth · Tracking · Insights · Settings).
+ *
+ * `collapsed` is a future-proofing prop for a per-group collapse toggle;
+ * it visually hides the children but keeps the label + divider in place.
+ */
+type SideNavGroupProps = {
+  label?: string;
+  children: React.ReactNode;
+  collapsed?: boolean;
+};
+
+export default function SideNavGroup({
+  label,
+  children,
+  collapsed = false,
+}: SideNavGroupProps) {
+  return (
+    <section
+      className="px-3 pb-3"
+      aria-label={label ? `${label} section` : undefined}
+    >
+      {label && (
+        <div
+          className="flex items-center gap-2 px-3 pt-3 pb-2 mb-1 border-b"
+          style={{ borderColor: "rgba(208, 203, 180, 0.12)" }}
+        >
+          <span
+            className="text-[10px] font-semibold uppercase tracking-widest select-none"
+            style={{ color: "rgba(184, 180, 168, 0.5)" }}
+          >
+            {label}
+          </span>
+        </div>
+      )}
+      <ul className="space-y-1" role="list" hidden={collapsed}>
+        {children}
+      </ul>
+    </section>
+  );
+}