Channels & basic structure

src/components/Sidebar.tsx

@@ -3,27 +3,29 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
 } from "./ui/sidebar";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, HashIcon, MicIcon, SpeakerIcon } from "lucide-react";
 import {
   DropdownMenuItem,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
+import Server from "@/types/Server";
 
 export default function AppSidebar({
+  server,
   children,
 }: Readonly<{
+  server?: Server;
   children: React.ReactNode;
 }>) {
   return (
-    <SidebarProvider defaultOpen>
+    server ? <SidebarProvider defaultOpen>
       <Sidebar>
         <SidebarHeader>
           <SidebarMenu>
@@ -48,8 +50,17 @@ export default function AppSidebar({
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
+        <SidebarContent className="px-2">
+          {server.channels.map((channel) => (
+            <SidebarMenuButton key={channel.id} className="gap-1.5">
+              {channel.kind === 'voice' ? <MicIcon /> : <HashIcon />}
+              {channel.name}
+            </SidebarMenuButton>
+          ))}
+        </SidebarContent>
       </Sidebar>
-      <SidebarInset>{children}</SidebarInset>
-    </SidebarProvider>
+      {children}
+    </SidebarProvider> :
+    children
   );
 }