diff --git a/package-lock.json b/package-lock.json index 4566831..07fa605 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@hello-pangea/dnd": "^18.0.1", + "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-popover": "^1.1.15", @@ -801,6 +802,36 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz", + "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.3", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-id": "1.1.1", + "@radix-ui/react-presence": "1.1.5", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-use-controllable-state": "1.2.2", + "@radix-ui/react-use-layout-effect": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz", diff --git a/package.json b/package.json index 96677dc..99aa8e8 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@hello-pangea/dnd": "^18.0.1", + "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-popover": "^1.1.15", diff --git a/src/app/workspace/page.tsx b/src/app/workspace/page.tsx index a7eb37a..dfe152b 100644 --- a/src/app/workspace/page.tsx +++ b/src/app/workspace/page.tsx @@ -1,6 +1,6 @@ "use client"; -import AppSidebar, { SidebarTrigger } from "@/components/AppSidebar"; +import AppSidebar, { SidebarTrigger } from "@/components/sidebar/AppSidebar"; import BoardView from "@/components/view/board/BoardView"; import TaskView from "@/components/view/TaskView"; import { Task } from "@/lib/types"; diff --git a/src/components/AppSidebar.tsx b/src/components/sidebar/AppSidebar.tsx similarity index 60% rename from src/components/AppSidebar.tsx rename to src/components/sidebar/AppSidebar.tsx index a3d6e1a..fd75603 100644 --- a/src/components/AppSidebar.tsx +++ b/src/components/sidebar/AppSidebar.tsx @@ -1,13 +1,21 @@ -import { cn } from "@/lib/utils"; -import { Button } from "./ui/button"; import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, + SidebarMenu, SidebarProvider, useSidebar, -} from "./ui/sidebar"; +} from "@/components/ui/sidebar"; +import EntitySwitch, { Entity } from "./Entity"; + +const workspaceEntities: Entity[] = [ + { + name: "Project alpha", + kind: "group", + children: [{ name: "Tasks", kind: "todo" }], + }, +]; export default function AppSidebar({ children, @@ -18,7 +26,13 @@ export default function AppSidebar({ - + + + {workspaceEntities.map((entity, i) => ( + + ))} + +
{children}
diff --git a/src/components/sidebar/Entity.tsx b/src/components/sidebar/Entity.tsx new file mode 100644 index 0000000..70f05e6 --- /dev/null +++ b/src/components/sidebar/Entity.tsx @@ -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 ( + + + + + + {entity.name} + + + + + + + + {entity.children?.map((entity, i) => ( + + ))} + + + + + + ); + case "todo": + return ( + + {entity.name} + + ); + } +} diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx new file mode 100644 index 0000000..ae9fad0 --- /dev/null +++ b/src/components/ui/collapsible.tsx @@ -0,0 +1,33 @@ +"use client" + +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" + +function Collapsible({ + ...props +}: React.ComponentProps) { + return +} + +function CollapsibleTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CollapsibleContent({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent }