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]/layout.tsx

@@ -27,9 +27,9 @@ type TeamWorkspaceLayoutProps = React.PropsWithChildren<{
 
 function TeamWorkspaceLayout({ children, params }: TeamWorkspaceLayoutProps) {
   const account = use(params).account;
-  const style = use(getLayoutStyle(account));
+  const state = use(getLayoutState(account));
 
-  if (style === 'sidebar') {
+  if (state.style === 'sidebar') {
     return <SidebarLayout account={account}>{children}</SidebarLayout>;
   }
 
@@ -43,6 +43,7 @@ function SidebarLayout({
   account: string;
 }>) {
   const data = use(loadTeamWorkspace(account));
+  const state = use(getLayoutState(account));
 
   const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
     label: name,
@@ -50,11 +51,9 @@ function SidebarLayout({
     image: picture_url,
   }));
 
-  const minimized = getTeamAccountSidebarConfig(account).sidebarCollapsed;
-
   return (
     <TeamAccountWorkspaceContextProvider value={data}>
-      <SidebarProvider minimized={minimized}>
+      <SidebarProvider defaultOpen={state.open}>
         <Page style={'sidebar'}>
           <PageNavigation>
             <TeamAccountLayoutSidebar
@@ -123,13 +122,21 @@ function HeaderLayout({
   );
 }
 
-async function getLayoutStyle(account: string) {
+async function getLayoutState(account: string) {
   const cookieStore = await cookies();
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+  const layoutCookie = cookieStore.get('layout-style');
+  const layoutStyle = layoutCookie?.value as PageLayoutStyle;
+  const config = getTeamAccountSidebarConfig(account);
 
-  return (
-    (cookieStore.get('layout-style')?.value as PageLayoutStyle) ??
-    getTeamAccountSidebarConfig(account).style
-  );
+  const sidebarOpenCookieValue = sidebarOpenCookie
+    ? sidebarOpenCookie.value === 'false'
+    : config.sidebarCollapsed;
+
+  return {
+    open: sidebarOpenCookieValue,
+    style: layoutStyle ?? config.style,
+  };
 }
 
 export default withI18n(TeamWorkspaceLayout);