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

apps/web/app/home/[account]/_components/team-account-accounts-selector.tsx

@@ -1,8 +1,11 @@
 'use client';
 
+import { useContext } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
+import { SidebarContext } from '@kit/ui/shadcn-sidebar';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -20,17 +23,16 @@ export function TeamAccountAccountsSelector(params: {
     value: string | null;
     image: string | null;
   }>;
-
-  collapsed?: boolean;
 }) {
   const router = useRouter();
+  const ctx = useContext(SidebarContext);
 
   return (
     <AccountSelector
       selectedAccount={params.selectedAccount}
       accounts={params.accounts}
       userId={params.userId}
-      collapsed={params.collapsed}
+      collapsed={!ctx?.open}
       features={features}
       onAccountChange={(value) => {
         const path = value

apps/web/app/home/[account]/_components/team-account-layout-page-header.tsx

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

apps/web/app/home/[account]/_components/team-account-layout-sidebar-navigation.tsx

@@ -1,13 +1,12 @@
+import { z } from 'zod';
+
+import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
 import { SidebarNavigation } from '@kit/ui/shadcn-sidebar';
 
-import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
-
 export function TeamAccountLayoutSidebarNavigation({
-  account,
+  config,
 }: React.PropsWithChildren<{
-  account: string;
+  config: z.infer<typeof NavigationConfigSchema>;
 }>) {
-  const routes = getTeamAccountSidebarConfig(account);
-
-  return <SidebarNavigation config={routes} />;
+  return <SidebarNavigation config={config} />;
 }

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>

apps/web/app/home/[account]/billing/error.tsx

@@ -20,10 +20,7 @@ export default function BillingErrorPage({
 
   return (
     <>
-      <PageHeader
-        title={<Trans i18nKey={'common:routes.billing'} />}
-        description={<AppBreadcrumbs />}
-      />
+      <PageHeader description={<AppBreadcrumbs />} />
 
       <PageBody>
         <div className={'flex flex-col space-y-4'}>

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);