Tyler
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|