Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's

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',