Sidebar: make it possible to set the sidebar as collapsed (#72)

* Sidebar: make it possible to set the sidebar as collapsed

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

@@ -20,6 +20,8 @@ export function TeamAccountAccountsSelector(params: {
     value: string | null;
     image: string | null;
   }>;
+
+  collapsed?: boolean;
 }) {
   const router = useRouter();
 
@@ -28,7 +30,7 @@ export function TeamAccountAccountsSelector(params: {
       selectedAccount={params.selectedAccount}
       accounts={params.accounts}
       userId={params.userId}
-      collapsed={false}
+      collapsed={params.collapsed}
       features={features}
       onAccountChange={(value) => {
         const path = value

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

@@ -1,8 +1,14 @@
-import { User } from '@supabase/supabase-js';
+'use client';
 
-import { Sidebar, SidebarContent } from '@kit/ui/sidebar';
+import { useContext } from 'react';
+
+import type { User } from '@supabase/supabase-js';
+
+import { Sidebar, SidebarContent, SidebarContext } from '@kit/ui/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';
@@ -18,11 +24,12 @@ export function TeamAccountLayoutSidebar(props: {
   account: string;
   accountId: string;
   accounts: AccountModel[];
-  collapsed: boolean;
   user: User;
 }) {
+  const collapsed = getTeamAccountSidebarConfig(props.account).sidebarCollapsed;
+
   return (
-    <Sidebar>
+    <Sidebar collapsed={collapsed}>
       <SidebarContainer
         account={props.account}
         accountId={props.accountId}
@@ -37,28 +44,40 @@ function SidebarContainer(props: {
   account: string;
   accountId: string;
   accounts: AccountModel[];
-  collapsible?: boolean;
   user: User;
 }) {
   const { account, accounts, user } = props;
   const userId = user.id;
+  const { collapsed } = useContext(SidebarContext);
+
+  const className = cn(
+    'flex max-w-full items-center justify-between space-x-4',
+    {
+      'w-full justify-start space-x-0': collapsed,
+    },
+  );
 
   return (
     <>
       <SidebarContent className={'h-16 justify-center'}>
-        <div
-          className={'flex max-w-full items-center justify-between space-x-4'}
-        >
+        <div className={className}>
           <TeamAccountAccountsSelector
             userId={userId}
             selectedAccount={account}
             accounts={accounts}
+            collapsed={collapsed}
           />
 
-          <TeamAccountNotifications
-            userId={userId}
-            accountId={props.accountId}
-          />
+          <div
+            className={cn({
+              hidden: collapsed,
+            })}
+          >
+            <TeamAccountNotifications
+              userId={userId}
+              accountId={props.accountId}
+            />
+          </div>
         </div>
       </SidebarContent>
 
@@ -70,7 +89,6 @@ function SidebarContainer(props: {
         <SidebarContent>
           <ProfileAccountDropdownContainer
             user={props.user}
-            collapsed={false}
           />
         </SidebarContent>
       </div>

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

@@ -62,7 +62,6 @@ export function TeamAccountNavigationMenu(props: {
         <TeamAccountNotifications accountId={account.id} userId={user.id} />
 
         <ProfileAccountDropdownContainer
-          collapsed={true}
           user={user}
           account={account}
         />

apps/web/app/home/[account]/layout.tsx

@@ -21,7 +21,7 @@ import { TeamAccountLayoutSidebar } from './_components/team-account-layout-side
 import { TeamAccountNavigationMenu } from './_components/team-account-navigation-menu';
 import { loadTeamWorkspace } from './_lib/server/team-account-workspace.loader';
 
-interface Params {
+interface TeamWorkspaceLayoutParams {
   account: string;
 }
 
@@ -29,7 +29,7 @@ function TeamWorkspaceLayout({
   children,
   params,
 }: React.PropsWithChildren<{
-  params: Params;
+  params: TeamWorkspaceLayoutParams;
 }>) {
   const data = use(loadTeamWorkspace(params.account));
   const style = getLayoutStyle(params.account);
@@ -45,7 +45,6 @@ function TeamWorkspaceLayout({
       <PageNavigation>
         <If condition={style === 'sidebar'}>
           <TeamAccountLayoutSidebar
-            collapsed={false}
             account={params.account}
             accountId={data.account.id}
             accounts={accounts}