feat: add router config, layout, header, and toolbar

src/routes/config.tsx

@@ -1,5 +1,17 @@
 import { Layout } from '@/components/Layout/Layout';
-import { Mobile, Personalcard, ProfileCircle, type Icon } from 'iconsax-react';
+import {
+  Calendar,
+  Devices,
+  LocationTick,
+  Mobile,
+  PasswordCheck,
+  Personalcard,
+  ProfileCircle,
+  Setting,
+  Shield,
+  Sms,
+  type Icon,
+} from 'iconsax-react';
 import { type ReactNode } from 'react';
 import { Navigate } from 'react-router-dom';
 
@@ -13,34 +25,93 @@ export interface RouteConfig {
   children?: RouteConfig[];
 }
 
+// can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
 export const appRoutes: RouteConfig[] = [
   {
     path: '/',
-    element: <Navigate to="/profile" replace />,
+    element: <Navigate to="/setting/profile" replace />,
   },
   {
-    path: '/profile',
-    // can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
+    path: '/setting',
     element: <Layout />,
-    navConfig: {
-      title: 'side.account',
-      icon: ProfileCircle,
-    },
     children: [
+      // TODO: add route component to each route
       {
-        path: '/profile/info',
-        element: <div>Personal Info Section</div>,
+        path: '/setting/profile',
         navConfig: {
-          title: 'side.personalInfo',
-          icon: Personalcard,
+          // Profile component
+          title: 'side.account',
+          icon: ProfileCircle,
+        },
+        children: [
+          {
+            path: '/setting/profile#info',
+            navConfig: {
+              title: 'side.personalInfo',
+              icon: Personalcard,
+            },
+          },
+          {
+            path: '/setting/profile#contact-info',
+            navConfig: {
+              title: 'side.contactInfo',
+              icon: Mobile,
+            },
+          },
+          {
+            path: '/setting/profile#email',
+            navConfig: {
+              title: 'side.email',
+              icon: Sms,
+            },
+          },
+        ],
+      },
+      {
+        path: '/setting/security',
+        // security component
+        navConfig: {
+          title: 'side.security',
+          icon: Shield,
+        },
+        children: [
+          {
+            path: '/setting/security#password',
+            navConfig: {
+              title: 'side.password',
+              icon: PasswordCheck,
+            },
+          },
+          {
+            path: '/setting/security#confirmed-ips',
+            navConfig: {
+              title: 'side.confirmedIps',
+              icon: LocationTick,
+            },
+          },
+          {
+            path: '/setting/security#recent-sessions',
+            navConfig: {
+              title: 'side.recentSessions',
+              icon: Devices,
+            },
+          },
+        ],
+      },
+      {
+        path: '/setting/active-sessions',
+        // active session component
+        navConfig: {
+          title: 'side.activeSessions',
+          icon: Calendar,
         },
       },
       {
-        path: '/profile/contact-info',
-        element: <div>Personal Info Section</div>,
+        path: '/setting/preferences',
+        // setting component
         navConfig: {
-          title: 'side.contactInfo',
-          icon: Mobile,
+          title: 'side.setting',
+          icon: Setting,
         },
       },
     ],