Sidebar structure

2025-11-11 19:15:47 +01:00
parent 01aaca1ca2
commit 2ea4f34e7a
6 changed files with 136 additions and 5 deletions
@@ -0,0 +1,52 @@
+import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "../ui/sidebar";
+import { Collapsible, CollapsibleContent } from "../ui/collapsible";
+import { ChevronDown } from "lucide-react";
+
+export interface Entity {
+  name: string;
+  kind: "group" | "todo";
+  children?: Entity[];
+}
+
+export default function EntitySwitch({ entity }: { entity: Entity }) {
+  switch (entity.kind) {
+    case "group":
+      return (
+        <Collapsible defaultOpen className="group/collapsible">
+          <SidebarGroup>
+            <SidebarGroupLabel asChild>
+              <SidebarMenuButton asChild>
+                <CollapsibleTrigger>
+                  {entity.name}
+                  <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                </CollapsibleTrigger>
+              </SidebarMenuButton>
+            </SidebarGroupLabel>
+            <CollapsibleContent>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {entity.children?.map((entity, i) => (
+                    <EntitySwitch entity={entity} key={i} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </CollapsibleContent>
+          </SidebarGroup>
+        </Collapsible>
+      );
+    case "todo":
+      return (
+        <SidebarMenuItem>
+          <SidebarMenuButton>{entity.name}</SidebarMenuButton>
+        </SidebarMenuItem>
+      );
+  }
+}