feat(sidebar): add collapsible functionality to AccountSidebar and AppSidebar

Author: hotlong

apps/account/src/components/account-sidebar.tsx

@@ -18,7 +18,7 @@
  */
 
 import { Link, useLocation } from '@tanstack/react-router';
-import { Building2, Monitor, Shield, ShieldCheck, User } from 'lucide-react';
+import { Building2, Monitor, PanelLeft, Shield, ShieldCheck, User } from 'lucide-react';
 import {
   Sidebar,
   SidebarContent,
@@ -30,7 +30,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
-  SidebarTrigger,
+  useSidebar,
 } from '@/components/ui/sidebar';
 
 interface NavItem {
@@ -107,10 +107,24 @@ export function AccountSidebar() {
       <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarTrigger />
+            <CollapseButton />
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarFooter>
     </Sidebar>
   );
 }
+
+function CollapseButton() {
+  const { state, toggleSidebar } = useSidebar();
+  const collapsed = state === 'collapsed';
+  return (
+    <SidebarMenuButton
+      onClick={toggleSidebar}
+      tooltip={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+    >
+      <PanelLeft className="size-4" />
+    </SidebarMenuButton>
+  );
+}

apps/account/src/routes/__root.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo } from 'react';
 import { ObjectStackProvider } from '@objectstack/client-react';
 import { ObjectStackClient } from '@objectstack/client';
 import { Toaster } from '@/components/ui/toaster';
-import { SidebarProvider } from '@/components/ui/sidebar';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { TopBar } from '@/components/top-bar';
 import { AccountSidebar } from '@/components/account-sidebar';
 import { SessionProvider, useSession } from '@/hooks/useSession';
@@ -59,18 +59,16 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
     return <div className="flex min-h-screen w-full">{children}</div>;
   }
 
-  // Authenticated layout: TopBar + Sidebar + main content.
+  // Authenticated layout: full-height Sidebar + SidebarInset (TopBar + main).
   return (
     <SidebarProvider>
-      <div className="flex min-h-screen w-full flex-col">
+      <AccountSidebar />
+      <SidebarInset className="flex h-svh min-w-0 flex-col overflow-hidden">
         <TopBar />
-        <div className="flex w-full flex-1 overflow-hidden">
-          <AccountSidebar />
-          <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
-            {children}
-          </main>
-        </div>
-      </div>
+        <main className="flex min-h-0 flex-1 flex-col overflow-auto bg-background">
+          {children}
+        </main>
+      </SidebarInset>
     </SidebarProvider>
   );
 }

apps/studio/src/components/app-sidebar.tsx

@@ -28,6 +28,7 @@ import {
   Anchor,
   UserCog,
   ChevronRight,
+  PanelLeft,
   Settings,
   Wrench,
   Sparkles,
@@ -56,6 +57,7 @@ import {
   SidebarMenuSubItem,
   SidebarMenuSubButton,
   SidebarTrigger,
+  useSidebar,
 } from "@/components/ui/sidebar"
 import {
   Collapsible,
@@ -566,10 +568,24 @@ export function AppSidebar({
       <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarTrigger />
+            <CollapseButton />
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarFooter>
     </Sidebar>
   )
 }
+
+function CollapseButton() {
+  const { state, toggleSidebar } = useSidebar()
+  const collapsed = state === 'collapsed'
+  return (
+    <SidebarMenuButton
+      onClick={toggleSidebar}
+      tooltip={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+    >
+      <PanelLeft className="size-4" />
+    </SidebarMenuButton>
+  )
+}