Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's

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

@@ -5,7 +5,7 @@ import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
-import { SidebarContext } from '@kit/ui/sidebar';
+import { SidebarContext } from '@kit/ui/shadcn-sidebar';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -25,11 +25,11 @@ export function HomeAccountSelector(props: {
   collisionPadding?: number;
 }) {
   const router = useRouter();
-  const { collapsed } = useContext(SidebarContext);
+  const context = useContext(SidebarContext);
 
   return (
     <AccountSelector
-      collapsed={collapsed}
+      collapsed={context?.minimized}
       collisionPadding={props.collisionPadding ?? 20}
       accounts={props.accounts}
       features={features}

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

@@ -44,15 +44,6 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
     if ('divider' in item) {
       return <DropdownMenuSeparator key={index} />;
     }
-
-    return (
-      <DropdownLink
-        key={item.path}
-        Icon={item.Icon}
-        path={item.path}
-        label={item.label}
-      />
-    );
   });
 
   return (

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

@@ -1,5 +1,12 @@
 import { If } from '@kit/ui/if';
-import { Sidebar, SidebarContent, SidebarNavigation } from '@kit/ui/sidebar';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarNavigation,
+  SidebarProvider,
+} from '@kit/ui/shadcn-sidebar';
 import { cn } from '@kit/ui/utils';
 
 import { AppLogo } from '~/components/app-logo';
@@ -16,43 +23,44 @@ interface HomeSidebarProps {
   workspace: UserWorkspace;
 }
 
+const minimized = personalAccountNavigationConfig.sidebarCollapsed;
+
 export function HomeSidebar(props: HomeSidebarProps) {
   const { workspace, user, accounts } = props.workspace;
-  const collapsed = personalAccountNavigationConfig.sidebarCollapsed;
 
   return (
-    <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={cn({
-                  'max-w-full': collapsed,
-                  'py-2': !collapsed,
-                })}
-              />
-            }
-          >
-            <HomeAccountSelector userId={user.id} accounts={accounts} />
-          </If>
+    <SidebarProvider minimized={minimized}>
+      <Sidebar>
+        <SidebarHeader className={'h-16 justify-center'}>
+          <div className={'flex items-center justify-between space-x-2'}>
+            <If
+              condition={featuresFlagConfig.enableTeamAccounts}
+              fallback={
+                <AppLogo
+                  className={cn({
+                    'max-w-full': minimized,
+                    'py-2': !minimized,
+                  })}
+                />
+              }
+            >
+              <HomeAccountSelector userId={user.id} accounts={accounts} />
+            </If>
 
-          <div className={'hidden group-aria-[expanded=true]/sidebar:block'}>
-            <UserNotifications userId={user.id} />
+            <div className={'group-data-[minimized=true]:hidden'}>
+              <UserNotifications userId={user.id} />
+            </div>
           </div>
-        </div>
-      </SidebarContent>
+        </SidebarHeader>
 
-      <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
-        <SidebarNavigation config={personalAccountNavigationConfig} />
-      </SidebarContent>
-
-      <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <ProfileAccountDropdownContainer user={user} account={workspace} />
+          <SidebarNavigation config={personalAccountNavigationConfig} />
         </SidebarContent>
-      </div>
-    </Sidebar>
+
+        <SidebarFooter>
+          <ProfileAccountDropdownContainer user={user} account={workspace} />
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
   );
 }