amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sidebar

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-02 12:41:25 +03:30
parent 064b3f66dc
commit 482d672955
11 changed files with 435 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.npmrc Normal file
View File

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

82
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

7
public/locales/fa/security.json
View File

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

11
src/App.tsx
View File

@@ -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 { ActiveDevices } from './features/profile/components/activeDevices/ActiveDevices';
import { Settings } from './features/profile/Settings';
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

177
src/features/profile/Settings.tsx Normal file
View File

@@ -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} />;
}

10
src/features/profile/components/activeDevices/ActiveDevices.tsx
View File

@@ -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>

12
src/features/profile/components/security/UserSecurity.tsx → src/features/profile/components/security/PasswordSecurity.tsx
View File

@@ -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>
) : (

99
src/features/profile/components/security/RecentLogins.tsx Normal file
View File

@@ -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>
);
}

12
src/features/profile/components/security/Security.tsx Normal file
View File

@@ -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>
);
}

94
src/features/profile/components/setting/Setting.tsx
View File

@@ -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 = () => {
if (isEditing) {
handleSave();
} else {
setDraftLanguage(savedLanguage);
setIsEditing(true);
}
};
const handleEditToggle = () =>
isEditing ? handleSave() : setIsEditing(true);
return (
<Box
sx={{
px: { xs: 2, sm: 3 },
py: 4,
backgroundColor: 'background.default',
}}
>
<Box sx={{ px: { xs: 2, sm: 3 }, py: 4, bgcolor: '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
sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
/>
<Box sx={{ width: '100%', height: 1, bgcolor: '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 1 337px' }}>
<Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
{isEditing ? (
<Autocomplete
options={languageOptions}
getOptionLabel={(option) => option.label}
getOptionLabel={(o) => o.label}
value={
languageOptions.find((opt) => opt.code === draftLanguage) ||
null
languageOptions.find((o) => o.code === draftLanguage) || null
}
onChange={handleDraftLanguageChange}
renderInput={(params) => (
<TextField {...params} label={t('settings.language')} />
renderInput={(p) => (
<TextField {...p} label={t('settings.language')} />
)}
size="small"
sx={{ width: 337, height: '56px' }}
size="medium"
fullWidth
/>
) : (
<Box sx={{ px: 6 }}>
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.language')}
</Typography>
<Typography variant="body1">
{
languageOptions.find((opt) => opt.code === savedLanguage)
?.label
}
{languageOptions.find((o) => o.code === savedLanguage)?.label}
</Typography>
</Box>
)}
</Box>
</Box>
<Box sx={{ mt: 2 }}>
<Box sx={{ width: { xs: '100%', sm: '337px' } }}>
<Box sx={{ mt: 2, px: 4 }}>
<Box sx={{ maxWidth: { sm: 310 }, width: '100%' }}>
{isEditing ? (
<Autocomplete
options={calendarOptions}
value={selectedCalendar}
onChange={(_, newVal) => newVal && setSelectedCalendar(newVal)}
renderInput={(params) => (
<TextField {...params} label={t('settings.calendar')} />
onChange={(_, v) => v && setSelectedCalendar(v)}
renderInput={(p) => (
<TextField {...p} label={t('settings.calendar')} />
)}
size="small"
sx={{ width: 337, height: 56 }}
size="medium"
fullWidth
/>
) : (
<Box sx={{ px: 6 }}>
<Typography variant="caption">
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.calendar')}
</Typography>
<Typography variant="body1">{selectedCalendar}</Typography>