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/(user)/layout.tsx

@@ -3,12 +3,7 @@ import { use } from 'react';
 import { cookies } from 'next/headers';
 
 import { UserWorkspaceContextProvider } from '@kit/accounts/components';
-import {
-  Page,
-  PageLayoutStyle,
-  PageMobileNavigation,
-  PageNavigation,
-} from '@kit/ui/page';
+import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
 import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
 import { AppLogo } from '~/components/app-logo';
@@ -22,9 +17,9 @@ import { HomeSidebar } from './_components/home-sidebar';
 import { loadUserWorkspace } from './_lib/server/load-user-workspace';
 
 function UserHomeLayout({ children }: React.PropsWithChildren) {
-  const style = use(getLayoutStyle());
+  const state = use(getLayoutState());
 
-  if (style === 'sidebar') {
+  if (state.style === 'sidebar') {
     return <SidebarLayout>{children}</SidebarLayout>;
   }
 
@@ -35,14 +30,16 @@ export default withI18n(UserHomeLayout);
 
 function SidebarLayout({ children }: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());
-  const sidebarMinimized = personalAccountNavigationConfig.sidebarCollapsed;
+  const state = use(getLayoutState());
+
+  console.log('state', state);
 
   return (
     <UserWorkspaceContextProvider value={workspace}>
-      <SidebarProvider minimized={sidebarMinimized}>
+      <SidebarProvider defaultOpen={state.open}>
         <Page style={'sidebar'}>
           <PageNavigation>
-            <HomeSidebar workspace={workspace} minimized={sidebarMinimized} />
+            <HomeSidebar workspace={workspace} />
           </PageNavigation>
 
           <PageMobileNavigation className={'flex items-center justify-between'}>
@@ -90,11 +87,21 @@ function MobileNavigation({
   );
 }
 
-async function getLayoutStyle() {
+async function getLayoutState() {
   const cookieStore = await cookies();
 
-  return (
-    (cookieStore.get('layout-style')?.value as PageLayoutStyle) ??
-    personalAccountNavigationConfig.style
-  );
+  const layoutStyleCookie = cookieStore.get('layout-style');
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+
+  const sidebarOpenCookieValue = sidebarOpenCookie
+    ? sidebarOpenCookie.value === 'false'
+    : personalAccountNavigationConfig.sidebarCollapsed;
+
+  const style =
+    layoutStyleCookie?.value ?? personalAccountNavigationConfig.style;
+
+  return {
+    open: sidebarOpenCookieValue,
+    style,
+  };
 }