feat: add router config, router, and sidenav config

src/routes/config.tsx

@@ -0,0 +1,48 @@
+import { Layout } from '@/components/Layout/Layout';
+import { Mobile, Personalcard, ProfileCircle, type Icon } from 'iconsax-react';
+import { type ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+export interface RouteConfig {
+  path: string;
+  element?: ReactNode;
+  navConfig?: {
+    title: string; // Translation key
+    icon?: Icon;
+  };
+  children?: RouteConfig[];
+}
+
+export const appRoutes: RouteConfig[] = [
+  {
+    path: '/',
+    element: <Navigate to="/profile" replace />,
+  },
+  {
+    path: '/profile',
+    // can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
+    element: <Layout />,
+    navConfig: {
+      title: 'side.account',
+      icon: ProfileCircle,
+    },
+    children: [
+      {
+        path: '/profile/info',
+        element: <div>Personal Info Section</div>,
+        navConfig: {
+          title: 'side.personalInfo',
+          icon: Personalcard,
+        },
+      },
+      {
+        path: '/profile/contact-info',
+        element: <div>Personal Info Section</div>,
+        navConfig: {
+          title: 'side.contactInfo',
+          icon: Mobile,
+        },
+      },
+    ],
+  },
+];

src/routes/index.tsx

@@ -0,0 +1,34 @@
+import { Suspense, type ReactNode } from 'react';
+import { createBrowserRouter, type RouteObject } from 'react-router-dom';
+import { appRoutes, type RouteConfig } from './config';
+
+/**
+ * A recursive function to map our custom route config to the format
+ * that react-router-dom expects, applying layouts and guards.
+ */
+function mapRoutes(routes: RouteConfig[]): RouteObject[] {
+  return routes.map((route) => {
+    // Start with the base element, wrapped in Suspense for lazy loading
+    let element: ReactNode = (
+      <Suspense fallback={<div>Loading...</div>}>{route.element}</Suspense>
+    );
+
+    // Conditionally wrap the element in the specified layout
+    // if (route.layout) {
+    //   element = <route.layout>{element}</route.layout>;
+    // }
+
+    // Conditionally wrap the element in the authentication guard
+    // if (route.authRequired) {
+    //   element = <ProtectedRoute>{element}</ProtectedRoute>;
+    // }
+
+    return {
+      path: route.path,
+      element: element,
+      ...(route.children && { children: mapRoutes(route.children) }),
+    };
+  });
+}
+
+export const router = createBrowserRouter(mapRoutes(appRoutes));