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)/_components/home-account-selector.tsx

@@ -29,7 +29,7 @@ export function HomeAccountSelector(props: {
 
   return (
     <AccountSelector
-      collapsed={context?.minimized}
+      collapsed={!context?.open}
       collisionPadding={props.collisionPadding ?? 20}
       accounts={props.accounts}
       features={features}

apps/web/app/home/(user)/_components/home-page-header.tsx

@@ -7,8 +7,6 @@ export function HomeLayoutPageHeader(
   }>,
 ) {
   return (
-    <PageHeader title={props.title} description={props.description}>
-      {props.children}
-    </PageHeader>
+    <PageHeader description={props.description}>{props.children}</PageHeader>
   );
 }

apps/web/app/home/(user)/_components/home-sidebar.tsx

@@ -20,24 +20,23 @@ import { HomeAccountSelector } from './home-account-selector';
 
 interface HomeSidebarProps {
   workspace: UserWorkspace;
-  minimized: boolean;
 }
 
 export function HomeSidebar(props: HomeSidebarProps) {
   const { workspace, user, accounts } = props.workspace;
+  const collapsible = personalAccountNavigationConfig.sidebarCollapsedStyle;
 
   return (
-    <Sidebar>
+    <Sidebar collapsible={collapsible}>
       <SidebarHeader className={'h-16 justify-center'}>
         <div className={'flex items-center justify-between gap-x-3'}>
           <If
             condition={featuresFlagConfig.enableTeamAccounts}
             fallback={
               <AppLogo
-                className={cn({
-                  'max-w-full': props.minimized,
-                  'py-2': !props.minimized,
-                })}
+                className={cn(
+                  'py-2 group-data-[minimized=true]:max-w-full group-data-[minimized=true]:py-0',
+                )}
               />
             }
           >

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,
+  };
 }