feat: add sidebar

.npmrc

@@ -0,0 +1,2 @@
+@rkheftan:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=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

package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.14.1",
         "@mui/material": "^7.2.0",
         "@mui/stylis-plugin-rtl": "^7.2.0",
+        "@rkheftan/harmony-ui": "^0.0.3",
         "i18next": "^25.3.0",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
@@ -1484,6 +1485,20 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@rkheftan/harmony-ui": {
+      "version": "0.0.3",
+      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.0.3/68af74cdbd6fce03e7d7fba0dee51f95bccd87ad",
+      "integrity": "sha512-ZH9zroehY4tVszlcz04L9X32AhgsXGiLSUbnYDL7I80DI5VcRYS0EirQkwIun4gnZI0ncoTX6pKlQOwCFK+8bw==",
+      "peerDependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@mui/material": "^7.2.0",
+        "iconsax-reactjs": "^0.0.8",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.7.1"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.19",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
@@ -2403,6 +2418,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3117,6 +3142,16 @@
         "react": "*"
       }
     },
+    "node_modules/iconsax-reactjs": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/iconsax-reactjs/-/iconsax-reactjs-0.0.8.tgz",
+      "integrity": "sha512-cb+uTMxbkSFNbu8ZclX7BWQVfOWQt8+m/PsDjnsm/H+mcYrnfTYMjHxiof1FB43k7UAgt1ds+0oFeMVKdqyslw==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3790,6 +3825,46 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz",
+      "integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz",
+      "integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "react-router": "7.7.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -3936,6 +4011,13 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.2.0",
     "@mui/stylis-plugin-rtl": "^7.2.0",
+    "@rkheftan/harmony-ui": "^0.0.3",
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",

public/locales/fa/security.json

@@ -12,6 +12,11 @@
     "hasUpperAndLower": "شامل یک حرف کوچک و بزرگ",
     "hasSpecialChar": "شامل علامت (!@#$%^&*)",
     "notCompatibility": "تکرار رمز عبور با رمز عبور یکسان نمی باشد",
-    "alertSuccess": "رمز عبور با موفقیت تعویض شد"
+    "alertSuccess": "رمز عبور با موفقیت تعویض شد",
+    "lastChange": "آخرین تغییر چند ثانیه پیش",
+    "activePassword": "رمز عبور فعال است",
+    "recentLogins": "ورود های اخیر",
+    "description": "در این بخش از ورود های اخیر به اکانت هارمونی خود را مشاهده می کنید",
+    "currentDevice": "دستگاه فعلی"
   }
 }

src/App.tsx

@@ -9,9 +9,9 @@ import {
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
-import { UserSecurity } from './features/profile/components/security/UserSecurity';
+import { Settings } from './features/profile/Settings';
-import { ActiveDevices } from './features/profile/components/activeDevices/ActiveDevices';
 import { Setting } from './features/profile/components/setting/Setting';
+
 function App() {
   const { t } = useTranslation();
 
@@ -19,9 +19,12 @@ function App() {
     <>
       <CssBaseline />
       <LanguageManager />
-      <UserSecurity />
+      {/* <Setting /> */}
+      {/* <RecentLogins /> */}
+      <Settings />
+      {/* <UserSecurity />
       <ActiveDevices />
-      <Setting />
+      <Setting /> */}
       {/* <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box

src/features/profile/Settings.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+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';
+
+interface DummyPageProp {
+  sections: { title: string; hash: string }[];
+}
+function DummyPage({ sections }: DummyPageProp) {
+  return (
+    <>
+      {sections.map(({ title, hash }) => (
+        <div key={hash} id={hash} style={{ height: '50vh', margin: '3rem' }}>
+          <Box p={3}>
+            <Typography variant="h4">{title}</Typography>
+          </Box>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function Header() {
+  return (
+    <Box
+      sx={{
+        height: 84,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        px: 2,
+      }}
+    >
+      <Typography variant="body2">محمدحسین برزه‌گر</Typography>
+      <Typography variant="body2" color="text.secondary">
+        09123456789
+      </Typography>
+    </Box>
+  );
+}
+
+function Layout() {
+  const theme = useTheme();
+  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
+  const location = useLocation();
+
+  const navConfig: NavItemConfig[] = [
+    {
+      text: 'حساب کاربری',
+      icon: <ProfileCircle size={24} />,
+      path: '/profile',
+      children: [
+        {
+          text: 'اطلاعات شخصی',
+          icon: <Personalcard size={24} />,
+          path: '/profile#info',
+        },
+        {
+          text: 'شماره تماس',
+          icon: <Mobile size={24} />,
+          path: '/profile#contact-info',
+        },
+        { text: 'ایمیل', icon: <Sms size={24} />, path: '/profile#email' },
+      ],
+    },
+    {
+      text: 'امنیت',
+      icon: <Shield size={24} />,
+      path: '/security',
+      children: [
+        {
+          text: 'رمز عبور',
+          icon: <PasswordCheck size={24} />,
+          path: '/security#password',
+        },
+        {
+          text: 'آدرس‌های تایید شده',
+          icon: <LocationTick size={24} />,
+          path: '/security#locations',
+        },
+        {
+          text: 'ورودهای اخیر',
+          icon: <Devices size={24} />,
+          path: '/security#sessions',
+        },
+      ],
+    },
+    { text: 'دستگاه‌های فعال', icon: <Devices size={24} />, path: '/devices' },
+    { text: 'تنظیمات', icon: <SettingIcon size={24} />, path: '/setting' },
+  ];
+
+  return (
+    <Box display="flex" flexDirection="column" minHeight="100vh">
+      <Box display="flex" flex={1} overflow="hidden">
+        <SideNav
+          navConfig={navConfig}
+          header={<Header />}
+          activePath={location.pathname + location.hash}
+          sideNavVariant={isMdUp ? 'full' : 'minimized'}
+          drawerWidth={274}
+          minimizedWidth={50}
+        />
+        <Box
+          flex={1}
+          display="flex"
+          justifyContent="center"
+          px={{ xs: 2, sm: 3 }}
+        >
+          <Box width="100%" maxWidth={790}>
+            <Outlet />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+const profileSections = [
+  { title: 'اطلاعات شخصی', hash: 'info' },
+  { title: 'شماره تماس', hash: 'contact-info' },
+  { title: 'ایمیل', hash: 'email' },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { path: '/', element: <Navigate to="/profile" replace /> },
+      { path: '/profile', element: <DummyPage sections={profileSections} /> },
+      {
+        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() {
+  useTranslation();
+  return <RouterProvider router={router} />;
+}

src/features/profile/components/activeDevices/ActiveDevices.tsx

@@ -66,7 +66,7 @@ export function ActiveDevices() {
             justifyContent: 'space-between',
             alignItems: 'center',
             flexWrap: 'wrap',
-            gap: 2,
+            py: 1,
             mb: 2,
           }}
         >
@@ -96,8 +96,8 @@ export function ActiveDevices() {
               display: 'flex',
               flexWrap: 'wrap',
               alignItems: 'center',
-              gap: 1,
               py: 1,
+              width: '690px',
             }}
           >
             <Typography
@@ -116,7 +116,11 @@ export function ActiveDevices() {
               }}
             >
               <DeviceMessage size={24} color="#82B1FF" />
-              <Typography variant="body2" noWrap>
+              <Typography
+                variant="body2"
+                noWrap
+                sx={{ width: { xs: '100%', sm: '138px' } }}
+              >
                 {device.deviceModel}
               </Typography>
             </Box>

src/features/profile/components/security/PasswordSecurity.tsx

@@ -19,7 +19,7 @@ import { Toast } from '@/components/Toast';
 import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
 
-export function UserSecurity() {
+export function PasswordSecurity() {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const { t } = useTranslation('security');
@@ -67,7 +67,7 @@ export function UserSecurity() {
   }, [password, validPassword]);
 
   return (
-    <Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 }, pb: 4 }}>
+    <Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 } }}>
       <Box
         sx={{
           backgroundColor: 'background.paper',
@@ -90,7 +90,7 @@ export function UserSecurity() {
         <Box
           sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
         />
-        <Box sx={{ px: { xs: 2, sm: 3 } }}>
+        <Box>
           <CardContainer
             title={t('securityForm.password')}
             subtitle={t('securityForm.determinePassword')}
@@ -113,9 +113,11 @@ export function UserSecurity() {
             <Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
               {changePassword ? (
                 <Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
-                  <Typography variant="h6">رمز عبور فعال است</Typography>
+                  <Typography variant="h6">
+                    {t('securityForm.activePassword')}
+                  </Typography>
                   <Typography variant="caption" color="text.secondary">
-                    آخرین تغییر چند ثانیه پیش
+                    {t('securityForm.lastChange')}
                   </Typography>
                 </Box>
               ) : (

src/features/profile/components/security/RecentLogins.tsx

@@ -0,0 +1,99 @@
+import { Box, Typography, Button } from '@mui/material';
+import { CardContainer } from '@/components/CardContainer';
+import { useTranslation } from 'react-i18next';
+
+export function RecentLogins() {
+  const { t } = useTranslation('security');
+  const data = [
+    {
+      id: 0,
+      time: 'دقایقی پیش',
+      device: 'asus i5 24i',
+      ip: '192.168.1.1',
+      current: true,
+    },
+    {
+      id: 1,
+      time: '۲۲:۱۳ - ۱۴۰۴/۰۹/۰۹',
+      device: 'samsung s23 ultra',
+      ip: '192.220.1.1',
+      current: false,
+    },
+  ];
+
+  return (
+    <Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 } }}>
+      <Box
+        sx={{
+          backgroundColor: 'background.paper',
+          width: '100%',
+          maxWidth: '796px',
+          mx: 'auto',
+          px: { xs: 1, sm: 2 },
+        }}
+      >
+        <Box>
+          <CardContainer
+            title={t('securityForm.recentLogins')}
+            subtitle={t('securityForm.description')}
+          >
+            <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
+              {data.map((d) => (
+                <Box
+                  sx={{
+                    display: 'flex',
+                    // flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: 1,
+                    height: '50px',
+                  }}
+                  key={d.id}
+                >
+                  <Typography
+                    variant="body2"
+                    sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  >
+                    {d.time}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  >
+                    {d.device}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  >
+                    {d.ip}
+                  </Typography>
+                  <Box sx={{ width: { xs: '100%', sm: '172.5px' } }}>
+                    {d.current ? (
+                      <Button
+                        variant="outlined"
+                        sx={{
+                          borderRadius: '15px',
+                          border: '2px solid',
+                          borderColor: 'success.main',
+                          height: '30px',
+                          whiteSpace: 'nowrap',
+                          color: 'success.main',
+                          width: '93px',
+                          textTransform: 'none',
+                        }}
+                      >
+                        {t('securityForm.currentDevice')}
+                      </Button>
+                    ) : (
+                      <Typography></Typography>
+                    )}
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </CardContainer>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/features/profile/components/security/Security.tsx

@@ -0,0 +1,12 @@
+import { PasswordSecurity } from './PasswordSecurity';
+import { RecentLogins } from './RecentLogins';
+import { Box } from '@mui/material';
+
+export function Security() {
+  return (
+    <Box sx={{ backgroundColor: 'background.paper' }}>
+      <PasswordSecurity />
+      <RecentLogins />
+    </Box>
+  );
+}

src/features/profile/components/setting/Setting.tsx

@@ -27,15 +27,6 @@ export function Setting() {
     { code: 'fa', label: 'فارسی' },
   ];
 
-  const handleDraftLanguageChange = (
-    _: any,
-    newValue: { code: string; label: string } | null,
-  ) => {
-    if (newValue) {
-      setDraftLanguage(newValue.code);
-    }
-  };
-
   const calendarOptions = [
     t('settings.christian'),
     t('settings.solar'),
@@ -45,6 +36,11 @@ export function Setting() {
     t('settings.solar'),
   );
 
+  const handleDraftLanguageChange = (
+    _: any,
+    v: { code: string; label: string } | null,
+  ) => v && setDraftLanguage(v.code);
+
   const handleCancel = () => {
     setDraftLanguage(savedLanguage);
     setIsEditing(false);
@@ -58,38 +54,23 @@ export function Setting() {
     setIsEditing(false);
   };
 
-  const handleEditToggle = () => {
+  const handleEditToggle = () =>
-    if (isEditing) {
+    isEditing ? handleSave() : setIsEditing(true);
-      handleSave();
-    } else {
-      setDraftLanguage(savedLanguage);
-      setIsEditing(true);
-    }
-  };
 
   return (
-    <Box
+    <Box sx={{ px: { xs: 2, sm: 3 }, py: 4, bgcolor: 'background.default' }}>
-      sx={{
-        px: { xs: 2, sm: 3 },
-        py: 4,
-        backgroundColor: 'background.default',
-      }}
-    >
       <Box
         sx={{
-          width: '754px',
+          maxWidth: 790,
           mx: 'auto',
-          backgroundColor: 'background.paper',
+          bgcolor: 'background.paper',
           px: { xs: 1, sm: 2 },
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', py: 2 }}>
           <Logo />
         </Box>
-        <Box
+        <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
-          sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
-        />
-
         <CardContainer
           title={t('settings.title')}
           subtitle={t('settings.description')}
@@ -119,24 +100,25 @@ export function Setting() {
             </Box>
           }
         />
-
         <Box
           sx={{
             display: 'flex',
-            flexWrap: 'wrap',
+            flexDirection: { xs: 'column', sm: 'row' },
             gap: 2,
             mt: 2,
-            width: '754px',
+            mx: 'auto',
+            width: { xs: '100%', md: 700 },
+            px: 4,
           }}
         >
-          <Box sx={{ flex: '1 1 337px' }}>
+          <Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
             {isEditing ? (
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Typography variant="body1">{t('settings.theme')}</Typography>
                 <ThemeToggleButton />
               </Box>
             ) : (
-              <Box sx={{ px: 6 }}>
+              <Box>
                 <Typography variant="caption" color="text.secondary">
                   {t('settings.theme')}
                 </Typography>
@@ -146,55 +128,49 @@ export function Setting() {
               </Box>
             )}
           </Box>
-
+          <Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
-          <Box sx={{ flex: '1 1 337px' }}>
             {isEditing ? (
               <Autocomplete
                 options={languageOptions}
-                getOptionLabel={(option) => option.label}
+                getOptionLabel={(o) => o.label}
                 value={
-                  languageOptions.find((opt) => opt.code === draftLanguage) ||
+                  languageOptions.find((o) => o.code === draftLanguage) || null
-                  null
                 }
                 onChange={handleDraftLanguageChange}
-                renderInput={(params) => (
+                renderInput={(p) => (
-                  <TextField {...params} label={t('settings.language')} />
+                  <TextField {...p} label={t('settings.language')} />
                 )}
-                size="small"
+                size="medium"
-                sx={{ width: 337, height: '56px' }}
+                fullWidth
               />
             ) : (
-              <Box sx={{ px: 6 }}>
+              <Box>
                 <Typography variant="caption" color="text.secondary">
                   {t('settings.language')}
                 </Typography>
                 <Typography variant="body1">
-                  {
+                  {languageOptions.find((o) => o.code === savedLanguage)?.label}
-                    languageOptions.find((opt) => opt.code === savedLanguage)
-                      ?.label
-                  }
                 </Typography>
               </Box>
             )}
           </Box>
         </Box>
-
+        <Box sx={{ mt: 2, px: 4 }}>
-        <Box sx={{ mt: 2 }}>
+          <Box sx={{ maxWidth: { sm: 310 }, width: '100%' }}>
-          <Box sx={{ width: { xs: '100%', sm: '337px' } }}>
             {isEditing ? (
               <Autocomplete
                 options={calendarOptions}
                 value={selectedCalendar}
-                onChange={(_, newVal) => newVal && setSelectedCalendar(newVal)}
+                onChange={(_, v) => v && setSelectedCalendar(v)}
-                renderInput={(params) => (
+                renderInput={(p) => (
-                  <TextField {...params} label={t('settings.calendar')} />
+                  <TextField {...p} label={t('settings.calendar')} />
                 )}
-                size="small"
+                size="medium"
-                sx={{ width: 337, height: 56 }}
+                fullWidth
               />
             ) : (
-              <Box sx={{ px: 6 }}>
+              <Box>
-                <Typography variant="caption">
+                <Typography variant="caption" color="text.secondary">
                   {t('settings.calendar')}
                 </Typography>
                 <Typography variant="body1">{selectedCalendar}</Typography>