feat: add sidebar

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