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/(user)/_components/home-account-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/sidebar';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -19,13 +22,13 @@ export function HomeAccountSelector(props: {
   }>;
 
   userId: string;
-  collapsed: boolean;
 }) {
   const router = useRouter();
+  const { collapsed } = useContext(SidebarContext);
 
   return (
     <AccountSelector
-      collapsed={props.collapsed}
+      collapsed={collapsed}
       accounts={props.accounts}
       features={features}
       userId={props.userId}

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

@@ -53,14 +53,12 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
           <HomeAccountSelector
             userId={user.id}
             accounts={accounts}
-            collapsed={false}
           />
         </If>
 
         <UserNotifications userId={user.id} />
 
         <ProfileAccountDropdownContainer
-          collapsed={true}
           user={user}
           account={workspace}
         />

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

@@ -71,7 +71,6 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
             <HomeAccountSelector
               userId={props.workspace.user.id}
               accounts={props.workspace.accounts}
-              collapsed={false}
             />
           </DropdownMenuGroup>
 

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

@@ -11,25 +11,28 @@ import { UserNotifications } from '~/home/(user)/_components/user-notifications'
 import type { UserWorkspace } from '../_lib/server/load-user-workspace';
 import { HomeAccountSelector } from './home-account-selector';
 
-export function HomeSidebar(props: { workspace: UserWorkspace }) {
+interface HomeSidebarProps {
+  workspace: UserWorkspace;
+}
+
+export function HomeSidebar(props: HomeSidebarProps) {
   const { workspace, user, accounts } = props.workspace;
+  const collapsed = personalAccountNavigationConfig.sidebarCollapsed;
 
   return (
-    <Sidebar>
+    <Sidebar collapsed={collapsed}>
       <SidebarContent className={'h-16 justify-center'}>
         <div className={'flex items-center justify-between space-x-2'}>
           <If
             condition={featuresFlagConfig.enableTeamAccounts}
             fallback={<AppLogo className={'py-2'} />}
           >
-            <HomeAccountSelector
-              userId={user.id}
-              collapsed={false}
-              accounts={accounts}
-            />
+            <HomeAccountSelector userId={user.id} accounts={accounts} />
           </If>
 
-          <UserNotifications userId={user.id} />
+          <div className={'hidden group-aria-[expanded=true]/sidebar:block'}>
+            <UserNotifications userId={user.id} />
+          </div>
         </div>
       </SidebarContent>
 
@@ -40,7 +43,6 @@ export function HomeSidebar(props: { workspace: UserWorkspace }) {
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
           <ProfileAccountDropdownContainer
-            collapsed={false}
             user={user}
             account={workspace}
           />

apps/web/app/home/(user)/layout.tsx

@@ -39,6 +39,7 @@ function UserHomeLayout({ children }: React.PropsWithChildren) {
 
       <PageMobileNavigation className={'flex items-center justify-between'}>
         <AppLogo />
+
         <HomeMobileNavigation workspace={workspace} />
       </PageMobileNavigation>
 
@@ -56,4 +57,4 @@ function getLayoutStyle() {
     (cookies().get('layout-style')?.value as PageLayoutStyle) ??
     personalAccountNavigationConfig.style
   );
-}
+}