Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's

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

@@ -65,15 +65,6 @@ export const TeamAccountLayoutMobileNavigation = (
       if ('divider' in item) {
         return <DropdownMenuSeparator key={index} />;
       }
-
-      return (
-        <DropdownLink
-          key={item.path}
-          Icon={item.Icon}
-          path={item.path}
-          label={item.label}
-        />
-      );
     },
   );
 

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

@@ -1,5 +1,4 @@
-import { SidebarDivider, SidebarGroup, SidebarItem } from '@kit/ui/sidebar';
-import { Trans } from '@kit/ui/trans';
+import { SidebarNavigation } from '@kit/ui/shadcn-sidebar';
 
 import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
 
@@ -8,50 +7,7 @@ export function TeamAccountLayoutSidebarNavigation({
 }: React.PropsWithChildren<{
   account: string;
 }>) {
-  const routes = getTeamAccountSidebarConfig(account).routes;
+  const routes = getTeamAccountSidebarConfig(account);
 
-  return (
-    <>
-      {routes.map((item, index) => {
-        if ('divider' in item) {
-          return <SidebarDivider key={index} />;
-        }
-
-        if ('children' in item) {
-          return (
-            <SidebarGroup
-              key={item.label}
-              label={<Trans i18nKey={item.label} defaults={item.label} />}
-              collapsible={item.collapsible}
-              collapsed={item.collapsed}
-            >
-              {item.children.map((child) => {
-                return (
-                  <SidebarItem
-                    key={child.path}
-                    end={child.end}
-                    path={child.path}
-                    Icon={child.Icon}
-                  >
-                    <Trans i18nKey={child.label} defaults={child.label} />
-                  </SidebarItem>
-                );
-              })}
-            </SidebarGroup>
-          );
-        }
-
-        return (
-          <SidebarItem
-            key={item.path}
-            end={item.end}
-            path={item.path}
-            Icon={item.Icon}
-          >
-            <Trans i18nKey={item.label} defaults={item.label} />
-          </SidebarItem>
-        );
-      })}
-    </>
-  );
+  return <SidebarNavigation config={routes} />;
 }

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

@@ -1,10 +1,15 @@
 'use client';
 
-import { useContext } from 'react';
-
 import type { User } from '@supabase/supabase-js';
 
-import { Sidebar, SidebarContent, SidebarContext } from '@kit/ui/sidebar';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarProvider,
+  useSidebar,
+} from '@kit/ui/shadcn-sidebar';
 import { cn } from '@kit/ui/utils';
 
 import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
@@ -26,17 +31,17 @@ export function TeamAccountLayoutSidebar(props: {
   accounts: AccountModel[];
   user: User;
 }) {
-  const collapsed = getTeamAccountSidebarConfig(props.account).sidebarCollapsed;
+  const minimized = getTeamAccountSidebarConfig(props.account).sidebarCollapsed;
 
   return (
-    <Sidebar collapsed={collapsed}>
+    <SidebarProvider minimized={minimized}>
       <SidebarContainer
         account={props.account}
         accountId={props.accountId}
         accounts={props.accounts}
         user={props.user}
       />
-    </Sidebar>
+    </SidebarProvider>
   );
 }
 
@@ -48,48 +53,44 @@ function SidebarContainer(props: {
 }) {
   const { account, accounts, user } = props;
   const userId = user.id;
-  const { collapsed } = useContext(SidebarContext);
+  const { minimized } = useSidebar();
 
   const className = cn(
     'flex max-w-full items-center justify-between space-x-4',
     {
-      'w-full justify-start space-x-0': collapsed,
+      'w-full justify-start space-x-0': minimized,
     },
   );
 
   return (
-    <>
-      <SidebarContent className={'h-16 justify-center'}>
+    <Sidebar>
+      <SidebarHeader className={'h-16 justify-center'}>
         <div className={className}>
           <TeamAccountAccountsSelector
             userId={userId}
             selectedAccount={account}
             accounts={accounts}
-            collapsed={collapsed}
+            collapsed={minimized}
           />
 
-          <div
-            className={cn({
-              hidden: collapsed,
-            })}
-          >
+          <div className="group-data-[minimized=true]:hidden">
             <TeamAccountNotifications
               userId={userId}
               accountId={props.accountId}
             />
           </div>
         </div>
-      </SidebarContent>
+      </SidebarHeader>
 
       <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
         <TeamAccountLayoutSidebarNavigation account={account} />
       </SidebarContent>
 
-      <div className={'absolute bottom-4 left-0 w-full'}>
+      <SidebarFooter>
         <SidebarContent>
           <ProfileAccountDropdownContainer user={props.user} />
         </SidebarContent>
-      </div>
-    </>
+      </SidebarFooter>
+    </Sidebar>
   );
 }