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

apps/web/config/personal-account-navigation.config.tsx

@@ -1,4 +1,5 @@
 import { CreditCard, Home, User } from 'lucide-react';
+import { z } from 'zod';
 
 import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
 
@@ -9,25 +10,34 @@ const iconClasses = 'w-4';
 
 const routes = [
   {
-    label: 'common:routes.home',
-    path: pathsConfig.app.home,
-    Icon: <Home className={iconClasses} />,
-    end: true,
+    label: 'common:routes.application',
+    children: [
+      {
+        label: 'common:routes.home',
+        path: pathsConfig.app.home,
+        Icon: <Home className={iconClasses} />,
+        end: true,
+      },
+    ],
   },
   {
-    label: 'common:routes.account',
-    path: pathsConfig.app.personalAccountSettings,
-    Icon: <User className={iconClasses} />,
+    label: 'common:routes.settings',
+    children: [
+      {
+        label: 'common:routes.profile',
+        path: pathsConfig.app.personalAccountSettings,
+        Icon: <User className={iconClasses} />,
+      },
+      featureFlagsConfig.enablePersonalAccountBilling
+        ? {
+            label: 'common:routes.billing',
+            path: pathsConfig.app.personalAccountBilling,
+            Icon: <CreditCard className={iconClasses} />,
+          }
+        : undefined,
+    ].filter(route => !!route),
   },
-];
-
-if (featureFlagsConfig.enablePersonalAccountBilling) {
-  routes.push({
-    label: 'common:routes.billing',
-    path: pathsConfig.app.personalAccountBilling,
-    Icon: <CreditCard className={iconClasses} />,
-  });
-}
+] satisfies z.infer<typeof NavigationConfigSchema>['routes'];
 
 export const personalAccountNavigationConfig = NavigationConfigSchema.parse({
   routes,

apps/web/config/team-account-navigation.config.tsx

@@ -9,10 +9,15 @@ const iconClasses = 'w-4';
 
 const getRoutes = (account: string) => [
   {
-    label: 'common:routes.dashboard',
-    path: pathsConfig.app.accountHome.replace('[account]', account),
-    Icon: <LayoutDashboard className={iconClasses} />,
-    end: true,
+    label: 'common:routes.application',
+    children: [
+      {
+        label: 'common:routes.dashboard',
+        path: pathsConfig.app.accountHome.replace('[account]', account),
+        Icon: <LayoutDashboard className={iconClasses} />,
+        end: true,
+      },
+    ],
   },
   {
     label: 'common:routes.settings',

apps/web/package.json

@@ -31,7 +31,7 @@
     "supabase:db:dump:local": "supabase db dump --local --data-only"
   },
   "dependencies": {
-    "@edge-csrf/nextjs": "2.5.0",
+    "@edge-csrf/nextjs": "2.5.1",
     "@hookform/resolvers": "^3.9.0",
     "@kit/accounts": "workspace:^",
     "@kit/admin": "workspace:^",
@@ -56,11 +56,11 @@
     "@marsidev/react-turnstile": "^1.0.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@supabase/supabase-js": "^2.45.6",
-    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-query": "5.59.16",
     "@tanstack/react-table": "^8.20.5",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.453.0",
-    "next": "15.0.0",
+    "next": "15.0.1",
     "next-sitemap": "^4.2.3",
     "next-themes": "0.3.0",
     "react": "19.0.0-rc-69d4b800-20241021",
@@ -77,9 +77,9 @@
     "@kit/prettier-config": "workspace:^",
     "@kit/tailwind-config": "workspace:^",
     "@kit/tsconfig": "workspace:^",
-    "@next/bundle-analyzer": "15.0.0",
+    "@next/bundle-analyzer": "15.0.1",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^22.7.8",
+    "@types/node": "^22.7.9",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "autoprefixer": "^10.4.20",
@@ -89,7 +89,7 @@
     "import-in-the-middle": "1.11.2",
     "prettier": "^3.3.3",
     "require-in-the-middle": "7.4.0",
-    "supabase": "^1.207.8",
+    "supabase": "^1.207.9",
     "tailwindcss": "3.4.14",
     "typescript": "^5.6.3"
   },

apps/web/public/locales/en/common.json

@@ -62,7 +62,8 @@
     "billing": "Billing",
     "dashboard": "Dashboard",
     "settings": "Settings",
-    "profile": "Profile"
+    "profile": "Profile",
+    "application": "Application"
   },
   "roles": {
     "owner": {

apps/web/styles/globals.css

@@ -24,11 +24,21 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 224 71.4% 4.1%;
     --radius: 0.5rem;
+
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -51,11 +61,21 @@
     --border: 215 27.9% 13%;
     --input: 215 27.9% 13%;
     --ring: 216 12.2% 83.9%;
+
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+
+    --sidebar-background: 224 71.4% 4.1%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 215 27.9% 13%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }