Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's

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