feat: add sidebar and change the style of that

2025-08-03 12:13:53 +03:30
parent ed347d8b61
commit bf87dd8123
22 changed files with 2430 additions and 788 deletions
--- a/src/features/profile/routes/SettingPage.tsx
+++ b/src/features/profile/routes/SettingPage.tsx
@@ -0,0 +1,203 @@
+import {
+  createBrowserRouter,
+  RouterProvider,
+  Navigate,
+  Outlet,
+  useLocation,
+} from 'react-router-dom';
+import { SideNav, type NavItemConfig } from '@rkheftan/harmony-ui';
+import {
+  Devices,
+  LocationTick,
+  Mobile,
+  PasswordCheck,
+  Personalcard,
+  ProfileCircle,
+  Setting as SettingIcon,
+  Shield,
+  Sms,
+} from 'iconsax-react';
+import { Box, Typography, useTheme, useMediaQuery } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import { ActiveDevices } from '../components/activeDevices/ActiveDevices';
+import { Setting } from '../components/setting/Setting';
+import { RecentLogins } from '../components/security/RecentLogins';
+import { PasswordSecurity } from '../components/security/PasswordSecurity';
+import { PersonalInformation } from '../components/userInformation/PersonalInformation';
+import { PhoneNumber } from '../components/userInformation/PhoneNumber';
+import { SocialMedia } from '../components/userInformation/SocialMedia';
+
+function Header() {
+  const headers = [{ name: 'محمدحسین برزه گر', phone: '09123456789' }];
+  return (
+    <Box
+      sx={{
+        height: 84,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        px: 2,
+      }}
+    >
+      {headers.map((h) => (
+        <Box key={h.phone}>
+          <Typography variant="body2">{h.name}</Typography>
+          <Typography variant="body2" color="text.secondary">
+            {h.phone}
+          </Typography>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export function Layout() {
+  const theme = useTheme();
+  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
+  const location = useLocation();
+  const { t } = useTranslation('sideMap');
+
+  const drawerWidth = 274;
+  const minimizedWidth = 64;
+  const navWidth = isMdUp ? drawerWidth : minimizedWidth;
+  const contentWidth = 790;
+  const totalWidth = navWidth + contentWidth;
+
+  const navConfig: NavItemConfig[] = [
+    {
+      text: t('side.account'),
+      icon: <ProfileCircle size={24} />,
+      path: '/profile',
+      children: [
+        {
+          text: t('side.personalInfo'),
+          icon: <Personalcard size={24} />,
+          path: '/profile#info',
+        },
+        {
+          text: t('side.phoneNumber'),
+          icon: <Mobile size={24} />,
+          path: '/profile#contact-info',
+        },
+        {
+          text: t('side.email'),
+          icon: <Sms size={24} />,
+          path: '/profile#email',
+        },
+      ],
+    },
+    {
+      text: t('side.security'),
+      icon: <Shield size={24} />,
+      path: '/security',
+      children: [
+        {
+          text: t('side.password'),
+          icon: <PasswordCheck size={24} />,
+          path: '/security#password',
+        },
+        {
+          text: t('side.verifiedAddress'),
+          icon: <LocationTick size={24} />,
+          path: '/security#locations',
+        },
+        {
+          text: t('side.recentLogins'),
+          icon: <Devices size={24} />,
+          path: '/security#sessions',
+        },
+      ],
+    },
+    {
+      text: t('side.activeDevices'),
+      icon: <Devices size={24} />,
+      path: '/devices',
+    },
+    {
+      text: t('side.settings'),
+      icon: <SettingIcon size={24} />,
+      path: '/setting',
+    },
+  ];
+
+  return (
+    <Box display="flex" flexDirection="column" minHeight="100vh">
+      <Box>
+        <Box
+          width={totalWidth}
+          maxWidth="100%"
+          mx="auto"
+          display="flex"
+          flexDirection="row"
+        >
+          <Box position="relative" width={navWidth}>
+            <SideNav
+              navConfig={navConfig}
+              header={<Header />}
+              activePath={location.pathname + location.hash}
+              sideNavVariant={isMdUp ? 'full' : 'minimized'}
+              positioning="absolute"
+              // drawerWidth={drawerWidth}
+              // minimizedWidth={minimizedWidth}
+            />
+          </Box>
+          <Box
+            // flex={1}
+            maxWidth={contentWidth}
+            width="100%"
+            // px={{ xs: 2, sm: 3 }}
+          >
+            <Outlet />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { path: '/', element: <Navigate to="/profile" replace /> },
+      {
+        path: '/profile',
+        element: (
+          <>
+            <div id="info">
+              <PersonalInformation />
+            </div>
+            <div id="contact-info">
+              <PhoneNumber />
+            </div>
+            <div id="email">
+              <SocialMedia />
+            </div>
+          </>
+        ),
+      },
+      {
+        path: '/security',
+        element: (
+          <>
+            <div id="password">
+              <PasswordSecurity />
+            </div>
+            <div id="locations"></div>
+            <div id="sessions">
+              <RecentLogins />
+            </div>
+          </>
+        ),
+      },
+      { path: '/devices', element: <ActiveDevices /> },
+      { path: '/setting', element: <Setting /> },
+    ],
+  },
+]);
+
+export function Settings() {
+  return <RouterProvider router={router} />;
+}