Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -22,9 +22,6 @@ const ModeToggle = dynamic(
     import('@kit/ui/mode-toggle').then((mod) => ({
       default: mod.ModeToggle,
     })),
-  {
-    ssr: false,
-  },
 );
 
 const paths = {

apps/web/app/(marketing)/docs/layout.tsx

@@ -11,7 +11,7 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
   const pages = await getDocs(resolvedLanguage);
 
   return (
-    <div className={'container flex'}>
+    <div className={'md:container flex'}>
       <DocsNavigation pages={buildDocumentationTree(pages)} />
 
       {children}

apps/web/app/admin/_components/admin-sidebar.tsx

@@ -1,40 +1,70 @@
-import { Home, Users } from 'lucide-react';
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { LayoutDashboard, Users } from 'lucide-react';
 
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
-  SidebarItem,
-} from '@kit/ui/sidebar';
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarProvider,
+} from '@kit/ui/shadcn-sidebar';
 
 import { AppLogo } from '~/components/app-logo';
 import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
 
 export function AdminSidebar() {
+  const path = usePathname();
+
   return (
-    <Sidebar>
-      <SidebarContent className={'py-4'}>
-        <AppLogo href={'/admin'} />
-      </SidebarContent>
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader className={'m-2'}>
+          <AppLogo href={'/admin'} />
+        </SidebarHeader>
 
-      <SidebarContent className={'mt-5'}>
-        <SidebarGroup label={'Admin'}>
-          <SidebarItem end path={'/admin'} Icon={<Home className={'h-4'} />}>
-            Home
-          </SidebarItem>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Admin</SidebarGroupLabel>
 
-          <SidebarItem
-            path={'/admin/accounts'}
-            Icon={<Users className={'h-4'} />}
-          >
-            Accounts
-          </SidebarItem>
-        </SidebarGroup>
-      </SidebarContent>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuButton isActive={path === '/admin'} asChild>
+                  <Link className={'flex gap-2.5'} href={'/admin'}>
+                    <LayoutDashboard className={'h-4'} />
+                    <span>Dashboard</span>
+                  </Link>
+                </SidebarMenuButton>
 
-      <SidebarContent className={'absolute bottom-4'}>
-        <ProfileAccountDropdownContainer />
-      </SidebarContent>
-    </Sidebar>
+                <SidebarMenuButton
+                  isActive={path.includes('/admin/accounts')}
+                  asChild
+                >
+                  <Link
+                    className={'flex size-full gap-2.5'}
+                    href={'/admin/accounts'}
+                  >
+                    <Users className={'h-4'} />
+                    <span>Accounts</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+
+        <SidebarFooter>
+          <ProfileAccountDropdownContainer />
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
   );
 }

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

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