Workspace info

src/components/sidebar/AppSidebar.tsx

@@ -4,18 +4,34 @@ import {
   SidebarFooter,
   SidebarHeader,
   SidebarMenu,
+  SidebarMenuItem,
   SidebarProvider,
   useSidebar,
 } from "@/components/ui/sidebar";
 import EntitySwitch, { Entity } from "./Entity";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { ChevronDown } from "lucide-react";
 
-const workspaceEntities: Entity[] = [
-  {
-    name: "Project alpha",
-    kind: "group",
-    children: [{ name: "Tasks", kind: "todo" }],
-  },
-];
+interface Workspace {
+  name: string;
+  entities: Entity[];
+}
+
+const workspace: Workspace = {
+  name: "Personal Workspace",
+  entities: [
+    {
+      name: "Project alpha",
+      kind: "group",
+      children: [{ name: "Tasks", kind: "todo" }],
+    },
+  ],
+};
 
 export default function AppSidebar({
   children,
@@ -25,10 +41,30 @@ export default function AppSidebar({
   return (
     <SidebarProvider>
       <Sidebar>
-        <SidebarHeader />
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button className="flex w-full items-center justify-between px-2 py-1 text-sm">
+                    {workspace.name}
+                    <ChevronDown className="ml-auto" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="start"
+                  className="w-(--radix-popper-anchor-width)"
+                >
+                  <DropdownMenuItem>Acme Inc</DropdownMenuItem>
+                  <DropdownMenuItem>Acme Corp.</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
         <SidebarContent>
           <SidebarMenu>
-            {workspaceEntities.map((entity, i) => (
+            {workspace.entities.map((entity, i) => (
               <EntitySwitch entity={entity} key={i} />
             ))}
           </SidebarMenu>