feat: add router config, router, and sidenav config

src/components/Layout/Layout.tsx

@@ -0,0 +1,46 @@
+import { SideNav } from '@rkheftan/harmony-ui';
+import { buildNavItems } from './navItems';
+import { appRoutes } from '@/routes/config';
+import { Outlet, useLocation } from 'react-router-dom';
+import { Box } from '@mui/material';
+import { grey } from '@mui/material/colors';
+
+export const Layout = () => {
+  const navItemConfigs = buildNavItems(appRoutes);
+  const location = useLocation();
+
+  return (
+    <Box
+      sx={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: 1070,
+          height: '80%',
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          borderRadius: 4,
+          backgroundColor: 'background.paper',
+          overflow: 'hidden',
+          padding: 1,
+        }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <Outlet />
+        </Box>
+
+        <SideNav
+          navConfig={navItemConfigs}
+          activePath={location.pathname + location.hash}
+          selectedVariant="textOnly"
+          positioning="absolute"
+        />
+      </Box>
+    </Box>
+  );
+};

src/components/Layout/navItems.tsx

@@ -0,0 +1,27 @@
+// src/components/SideNav.tsx (Conceptual Example)
+
+import { useTranslation } from 'react-i18next';
+import { type RouteConfig } from '@/routes/config';
+import { Icon, type NavItemConfig } from '@rkheftan/harmony-ui';
+import type { Icon as Iconsax } from 'iconsax-react';
+
+const getIcon = (icon?: Iconsax) => (isSelected: boolean) =>
+  icon ? (
+    <Icon Component={icon} variant={isSelected ? 'Bold' : 'Broken'} />
+  ) : undefined;
+
+export function buildNavItems(routes: RouteConfig[]): NavItemConfig[] {
+  const { t } = useTranslation();
+
+  return routes
+    .filter((route) => route.navConfig)
+    .map((route) => {
+      const { title, icon } = route.navConfig!;
+      return {
+        text: t(title),
+        getIcon: getIcon(icon),
+        path: route.path,
+        children: route.children ? buildNavItems(route.children) : undefined,
+      };
+    });
+}