134 improvement add a button that allows closing the sidebar (#135)

* Enhance sidebar navigation and layout configuration

- Added support for configurable sidebar collapsed style
- Updated layout components to use new sidebar configuration
- Added environment variable for sidebar trigger display
- Simplified page header and navigation components
- Improved sidebar responsiveness and user experience

* Refactor admin account page layout and action buttons

- Moved action buttons from sidebar to PageHeader for both personal and team account pages
- Updated button variants and styling for better visual hierarchy
- Improved spacing and layout of account page components
- Added border to PageHeader for better visual separation

* Update version updater dialog styling

- Replaced `space-x-4` with `gap-x-2` for better spacing
- Wrapped translation text in a `span` for improved layout
- Maintained consistent icon and text alignment in dialog title

* Refactor sidebar state management and configuration

- Simplified sidebar context and removed minimized state
- Updated layout components to use new sidebar open/closed state
- Modified sidebar navigation to handle collapsed state dynamically
- Added environment variable for sidebar trigger and collapsed style
- Improved sidebar responsiveness and rendering logic

* Remove sidebar configuration and environment variables

- Simplified sidebar context by removing `minimized` state in components
- Updated account selector components to use simplified sidebar state
- Removed unused helper functions in sidebar implementation

apps/web/app/admin/_components/admin-sidebar.tsx

@@ -15,7 +15,6 @@ import {
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
-  SidebarProvider,
 } from '@kit/ui/shadcn-sidebar';
 
 import { AppLogo } from '~/components/app-logo';
@@ -25,46 +24,44 @@ export function AdminSidebar() {
   const path = usePathname();
 
   return (
-    <SidebarProvider>
-      <Sidebar>
-        <SidebarHeader className={'m-2'}>
-          <AppLogo href={'/admin'} />
-        </SidebarHeader>
+    <Sidebar collapsible="icon">
+      <SidebarHeader className={'m-2'}>
+        <AppLogo href={'/admin'} className="max-w-full" />
+      </SidebarHeader>
 
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>Admin</SidebarGroupLabel>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Admin</SidebarGroupLabel>
 
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <SidebarMenuButton isActive={path === '/admin'} asChild>
-                  <Link className={'flex gap-2.5'} href={'/admin'}>
-                    <LayoutDashboard className={'h-4'} />
-                    <span>Dashboard</span>
-                  </Link>
-                </SidebarMenuButton>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuButton isActive={path === '/admin'} asChild>
+                <Link className={'flex gap-2.5'} href={'/admin'}>
+                  <LayoutDashboard className={'h-4'} />
+                  <span>Dashboard</span>
+                </Link>
+              </SidebarMenuButton>
 
-                <SidebarMenuButton
-                  isActive={path.includes('/admin/accounts')}
-                  asChild
+              <SidebarMenuButton
+                isActive={path.includes('/admin/accounts')}
+                asChild
+              >
+                <Link
+                  className={'flex size-full gap-2.5'}
+                  href={'/admin/accounts'}
                 >
-                  <Link
-                    className={'flex size-full gap-2.5'}
-                    href={'/admin/accounts'}
-                  >
-                    <Users className={'h-4'} />
-                    <span>Accounts</span>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
+                  <Users className={'h-4'} />
+                  <span>Accounts</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
 
-        <SidebarFooter>
-          <ProfileAccountDropdownContainer />
-        </SidebarFooter>
-      </Sidebar>
-    </SidebarProvider>
+      <SidebarFooter>
+        <ProfileAccountDropdownContainer />
+      </SidebarFooter>
+    </Sidebar>
   );
 }