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/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { User } from '@supabase/supabase-js';
 
 import {
@@ -7,11 +5,10 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  useSidebar,
 } from '@kit/ui/shadcn-sidebar';
-import { cn } from '@kit/ui/utils';
 
 import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
 import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
 
 import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
@@ -47,27 +44,21 @@ function SidebarContainer(props: {
 }) {
   const { account, accounts, user } = props;
   const userId = user.id;
-  const { minimized } = useSidebar();
 
-  const className = cn(
-    'flex max-w-full items-center justify-between space-x-4',
-    {
-      'w-full justify-start space-x-0': minimized,
-    },
-  );
+  const config = getTeamAccountSidebarConfig(account);
+  const collapsible = config.sidebarCollapsedStyle;
 
   return (
-    <Sidebar>
+    <Sidebar collapsible={collapsible}>
       <SidebarHeader className={'h-16 justify-center'}>
-        <div className={className}>
+        <div className={'flex items-center justify-between gap-x-3'}>
           <TeamAccountAccountsSelector
             userId={userId}
             selectedAccount={account}
             accounts={accounts}
-            collapsed={minimized}
           />
 
-          <div className="group-data-[minimized=true]:hidden">
+          <div className={'group-data-[minimized=true]:hidden'}>
             <TeamAccountNotifications
               userId={userId}
               accountId={props.accountId}
@@ -77,7 +68,7 @@ function SidebarContainer(props: {
       </SidebarHeader>
 
       <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
-        <TeamAccountLayoutSidebarNavigation account={account} />
+        <TeamAccountLayoutSidebarNavigation config={config} />
       </SidebarContent>
 
       <SidebarFooter>