fix: responsiveness of sideNav component

src/features/profile/components/PageWrapper.tsx

@@ -0,0 +1,22 @@
+import { Box } from '@mui/material';
+import React from 'react';
+
+interface PageWrapperProps {
+  children: React.ReactNode;
+}
+
+export function PageWrapper({ children }: PageWrapperProps) {
+  return (
+    <Box
+      sx={{
+        mx: 'auto',
+        width: { xs: '100%', sm: '754px' },
+        backgroundColor: 'background.paper',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

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

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { DeviceMessage, Logout } from 'iconsax-react';
 import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
+import { PageWrapper } from '../PageWrapper';
 
 export function ActiveDevices() {
   const { t } = useTranslation('activeDevices');
@@ -39,25 +40,13 @@ export function ActiveDevices() {
   ];
 
   return (
-    <Box
+    <PageWrapper>
-      sx={{
+      <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
-        mx: 'auto',
-        backgroundColor: 'background.paper',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          py: 2,
-          height: 84,
-        }}
-      >
         <Logo />
       </Box>
+
       <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
+
       <CardContainer
         title={t('active.activeDevices')}
         subtitle={t('active.activeDevicesCaption')}
@@ -68,8 +57,8 @@ export function ActiveDevices() {
               borderRadius: '10px',
               borderColor: 'error.main',
               color: 'error.main',
-              border: '1px solid',
               textTransform: 'none',
+              width: { xs: '100%', sm: 'auto' },
             }}
           >
             {t('active.deletDevicesButton')}
@@ -82,54 +71,67 @@ export function ActiveDevices() {
             py: 2,
             display: 'flex',
             flexDirection: 'column',
-            gap: 2,
+            // gap: 2,
-            flex: 1,
           }}
         >
-          <Box sx={{ width: '100%', maxWidth: '754px' }}>
           {devices.map((device) => (
             <Box
               key={device.id}
               sx={{
                 display: 'flex',
-                  alignItems: 'center',
+                flexDirection: { xs: 'column', sm: 'row' },
-                  gap: 1,
+                alignItems: { xs: 'flex-start', sm: 'center' },
-                  height: 50,
+                minHeight: 50,
               }}
             >
               <Typography
                 variant="body2"
-                  sx={{ width: { xs: '100%', sm: '138px' } }}
+                sx={{
+                  flexBasis: { xs: '100%', sm: 'auto' },
+                  mb: { xs: 1, sm: 0 },
+                  minWidth: { sm: '138px' },
+                  order: { xs: 1, sm: 1 },
+                }}
               >
                 {device.timeAndDate}
               </Typography>
+
               <Box
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
-                    width: { xs: '100%', sm: '138px' },
                   gap: 1,
+                  flexBasis: { xs: '100%', sm: 'auto' },
+                  mb: { xs: 1, sm: 0 },
+                  minWidth: { sm: '138px' },
+                  order: { xs: 2, sm: 2 },
                 }}
               >
                 <DeviceMessage size={24} color="#82B1FF" />
-                  <Typography
+                <Typography variant="body2" noWrap>
-                    variant="body2"
-                    noWrap
-                    sx={{ width: { xs: '100%', sm: '138px' } }}
-                  >
                   {device.deviceModel}
                 </Typography>
               </Box>
+
               <Typography
                 variant="body2"
-                  sx={{ width: { xs: '100%', sm: '138px' } }}
+                sx={{
+                  flexBasis: { xs: '100%', sm: 'auto' },
+                  mb: { xs: 1, sm: 0 },
+                  minWidth: { sm: '138px' },
+                  order: { xs: 3, sm: 3 },
+                }}
               >
                 {device.ip}
               </Typography>
+
               <Box
                 sx={{
-                    width: { xs: '100%', sm: '138px' },
+                  flexBasis: { xs: '100%', sm: 'auto' },
+                  mb: { xs: 1, sm: 0 },
                   textAlign: { xs: 'left', sm: 'center' },
+                  minWidth: { sm: '138px' },
+                  order: { xs: 4, sm: 4 },
                 }}
               >
                 {device.current && (
@@ -142,7 +144,6 @@ export function ActiveDevices() {
                       height: '30px',
                       whiteSpace: 'nowrap',
                       color: 'success.main',
-                        // width: '93px',
                       textTransform: 'none',
                     }}
                   >
@@ -150,10 +151,14 @@ export function ActiveDevices() {
                   </Button>
                 )}
               </Box>
+
               <Box
                 sx={{
-                    width: { xs: '100%', sm: '138px' },
+                  flexBasis: { xs: '100%', sm: 'auto' },
+                  mb: { xs: 1, sm: 0 },
                   textAlign: { xs: 'left', sm: 'center' },
+                  minWidth: { sm: '150px' },
+                  order: { xs: 5, sm: 5 },
                 }}
               >
                 <Button
@@ -163,7 +168,6 @@ export function ActiveDevices() {
                   disabled={device.current}
                   sx={{
                     color: 'error.main',
-                      // width: '80%',
                     minWidth: 0,
                     borderRadius: '15px',
                     borderColor: 'error.main',
@@ -185,8 +189,7 @@ export function ActiveDevices() {
             </Box>
           ))}
         </Box>
-        </Box>
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }

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

@@ -19,6 +19,7 @@ import { PasswordValidationItem } from './PasswordValidation';
 import { Toast } from '@/components/Toast';
 import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
+import { PageWrapper } from '../PageWrapper';
 
 export function PasswordSecurity() {
   const theme = useTheme();
@@ -70,14 +71,7 @@ export function PasswordSecurity() {
   }, [password, validPassword]);
 
   return (
-    <Box
+    <PageWrapper>
-      sx={{
-        mx: 'auto',
-        backgroundColor: 'background.paper',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
       <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
         <Logo />
       </Box>
@@ -148,7 +142,6 @@ export function PasswordSecurity() {
               </Typography>
             )}
           </Box>
-
           <Dialog
             open={open}
             onClose={handleClose}
@@ -198,7 +191,6 @@ export function PasswordSecurity() {
                   onChange={(e) => setPassword(e.target.value)}
                   sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
                 />
-
                 {password && showValidation && (
                   <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                     <Box sx={{ maxWidth: '364px', width: '100%' }}>
@@ -221,7 +213,6 @@ export function PasswordSecurity() {
                     </Box>
                   </Box>
                 )}
-
                 <TextField
                   label={t('securityForm.confirmPassword')}
                   type="password"
@@ -257,7 +248,6 @@ export function PasswordSecurity() {
                     mt: 2,
                   }}
                 />
-
                 {password && showValidation && (
                   <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                     <Box sx={{ maxWidth: '364px', width: '100%' }}>
@@ -280,7 +270,6 @@ export function PasswordSecurity() {
                     </Box>
                   </Box>
                 )}
-
                 <TextField
                   label={t('securityForm.confirmPassword')}
                   type="password"
@@ -325,7 +314,6 @@ export function PasswordSecurity() {
               </Button>
             </DialogActions>
           </Dialog>
-
           <Toast
             color="success"
             open={showPasswordAlert}
@@ -335,6 +323,6 @@ export function PasswordSecurity() {
           </Toast>
         </Box>
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }

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

@@ -1,6 +1,7 @@
 import { Box, Typography, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
+import { PageWrapper } from '../PageWrapper';
 
 export function RecentLogins() {
   const { t } = useTranslation('security');
@@ -22,27 +23,25 @@ export function RecentLogins() {
   ];
 
   return (
-    <Box
+    <PageWrapper>
-      sx={{
-        mx: 'auto',
-        backgroundColor: 'background.paper',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
       <CardContainer
         title={t('securityForm.recentLogins')}
         subtitle={t('securityForm.description')}
       >
         <Box
           sx={{
-            px: { xs: 2, sm: 3, md: 4 },
+            // px: { xs: 2, sm: 3, md: 4 },
             py: 2,
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
             bgcolor: 'background.paper',
             flex: 1,
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            '&:last-child': {
+              borderBottom: 'none',
+            },
           }}
         >
           <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
@@ -50,31 +49,54 @@ export function RecentLogins() {
               <Box
                 sx={{
                   display: 'flex',
-                  alignItems: 'center',
+                  flexDirection: { xs: 'column', sm: 'row' },
-                  gap: 1,
+                  alignItems: { xs: 'flex-start', sm: 'center' },
-                  height: '50px',
+                  minHeight: 50,
                 }}
                 key={d.id}
               >
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 1, sm: 1 },
+                  }}
                 >
                   {d.time}
                 </Typography>
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 1, sm: 1 },
+                  }}
                 >
                   {d.device}
                 </Typography>
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 1, sm: 1 },
+                  }}
                 >
                   {d.ip}
                 </Typography>
-                <Box sx={{ width: { xs: '100%', sm: '172.5px' } }}>
+                <Box
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    textAlign: { xs: 'left', sm: 'center' },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 4, sm: 4 },
+                  }}
+                >
                   {d.current && (
                     <Button
                       variant="outlined"
@@ -85,9 +107,7 @@ export function RecentLogins() {
                         height: '30px',
                         whiteSpace: 'nowrap',
                         color: 'success.main',
-                        width: '93px',
                         textTransform: 'none',
-                        fontSize: '0.75rem',
                       }}
                     >
                       {t('securityForm.currentDevice')}
@@ -99,6 +119,6 @@ export function RecentLogins() {
           </Box>
         </Box>
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }

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

@@ -11,6 +11,7 @@ import { CardContainer } from '@/components/CardContainer';
 import { useTranslation } from 'react-i18next';
 import { ThemeToggleButton } from '@/components/ThemToggle';
 import Logo from '@/components/Logo';
+import { PageWrapper } from '../PageWrapper';
 
 export function Setting() {
   const { t, i18n } = useTranslation(['setting']);
@@ -57,18 +58,18 @@ export function Setting() {
     isEditing ? handleSave() : setIsEditing(true);
 
   return (
-    <Box sx={{ backgroundColor: 'background.paper', minHeight: '100vh' }}>
+    <PageWrapper>
-      <Box
+      <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          py: 2,
-          height: 84,
-        }}
-      >
         <Logo />
       </Box>
       <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
+      <Box
+        sx={{
+          width: '100%', // always span full width
+          px: { xs: 0, sm: 3 }, // no side padding on xs, keep padding on sm+
+          mx: 0, // zero out any horizontal margin
+        }}
+      >
         <CardContainer
           title={t('settings.title')}
           subtitle={t('settings.description')}
@@ -107,7 +108,9 @@ export function Setting() {
                   fontSize: { xs: '0.9rem', sm: '1rem' },
                 }}
               >
-              {isEditing ? t('settings.saveButton') : t('settings.editButton')}
+                {isEditing
+                  ? t('settings.saveButton')
+                  : t('settings.editButton')}
               </Button>
             </Box>
           }
@@ -120,6 +123,7 @@ export function Setting() {
               flexDirection: 'column',
               gap: 2,
               bgcolor: 'background.paper',
+              width: '100%',
             }}
           >
             <Box
@@ -128,15 +132,15 @@ export function Setting() {
                 flexDirection: { xs: 'column', sm: 'row' },
                 gap: 2,
                 mt: 2,
-              mx: 'auto',
+                width: '100%',
-              width: { xs: '100%', md: 690 },
-              // px: 4,
               }}
             >
-            <Box sx={{ flex: 1, maxWidth: { sm: 310 }, width: '100%' }}>
+              <Box sx={{ flex: 1 }}>
                 {isEditing ? (
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Typography variant="body1">{t('settings.theme')}</Typography>
+                    <Typography variant="body1">
+                      {t('settings.theme')}
+                    </Typography>
                     <ThemeToggleButton />
                   </Box>
                 ) : (
@@ -152,7 +156,7 @@ export function Setting() {
                   </Box>
                 )}
               </Box>
-            <Box sx={{ flex: 1, maxWidth: { sm: 310 }, width: '100%' }}>
+              <Box sx={{ flex: 1 }}>
                 {isEditing ? (
                   <Autocomplete
                     options={languageOptions}
@@ -183,7 +187,7 @@ export function Setting() {
                 )}
               </Box>
             </Box>
-          <Box sx={{ mt: 2, maxWidth: { sm: 310 }, width: '100%' }}>
+            <Box sx={{ mt: 2, width: '100%' }}>
               {isEditing ? (
                 <Autocomplete
                   options={calendarOptions}
@@ -207,5 +211,6 @@ export function Setting() {
           </Box>
         </CardContainer>
       </Box>
+    </PageWrapper>
   );
 }

src/features/profile/components/userInformation/PersonalInformation.tsx

@@ -6,6 +6,7 @@ import { ProfileImage } from './personlInformation/ProfileImage';
 import { InfoRowDisplay } from './personlInformation/InfoRowDisplay';
 import { InfoRowEdit } from './personlInformation/InfoRowEdit';
 import Logo from '@/components/Logo';
+import { PageWrapper } from '../PageWrapper';
 
 export function PersonalInformation() {
   const { t } = useTranslation('profileSetting');
@@ -39,7 +40,7 @@ export function PersonalInformation() {
   };
 
   return (
-    <Box sx={{ backgroundColor: 'background.paper' }}>
+    <PageWrapper>
       <Box
         sx={{
           display: 'flex',
@@ -138,6 +139,6 @@ export function PersonalInformation() {
           )}
         </Box>
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }

src/features/profile/components/userInformation/PhoneNumber.tsx

@@ -1,10 +1,11 @@
-import React, { useState, type ChangeEvent } from 'react';
+import { useState, type ChangeEvent } from 'react';
 import { Box, Typography, Button, TextField, IconButton } from '@mui/material';
 import { Edit, Refresh, TickCircle } from 'iconsax-react';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { CountDownTimer } from '@/components/CountDownTimer';
 import { Toast } from '@/components/Toast';
+import { PageWrapper } from '../PageWrapper';
 
 export function PhoneNumber() {
   const { t } = useTranslation('profileSetting');
@@ -72,7 +73,7 @@ export function PhoneNumber() {
   };
 
   return (
-    <Box sx={{ backgroundColor: 'background.paper' }}>
+    <PageWrapper>
       <CardContainer
         title={t('settingForm.titlePhoneNumber')}
         subtitle={t('settingForm.descriptionPhoneNumber')}
@@ -283,6 +284,6 @@ export function PhoneNumber() {
           </Box>
         )}
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }

src/features/profile/components/userInformation/SocialMedia.tsx

@@ -14,6 +14,8 @@ import {
   ListItemText,
   useMediaQuery,
 } from '@mui/material';
+import Slide from '@mui/material/Slide';
+import type { TransitionProps } from '@mui/material/transitions';
 import type { Theme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
@@ -27,17 +29,34 @@ import {
   Message,
   ArrowDown3,
 } from 'iconsax-react';
+import { PageWrapper } from '../PageWrapper';
+
+const MobileSlide = React.forwardRef(function MobileSlide(
+  props: TransitionProps & { children: React.ReactElement<any, any> },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
 
 export function SocialMedia() {
   const { t } = useTranslation('profileSetting');
+
   const [openDialog, setOpenDialog] = useState(false);
   const [emailInput, setEmailInput] = useState('');
   const [emailError, setEmailError] = useState(false);
   const [anchor, setAnchor] = useState<null | HTMLElement>(null);
+
   const openMenu = Boolean(anchor);
   const fullScreen = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down('sm'),
   );
+  const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const computedMaxWidth = (fullScreen ? 'xs' : downMd ? 'sm' : 'md') as
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl';
 
   const handleOpenDialog = () => setOpenDialog(true);
   const handleCloseDialog = () => setOpenDialog(false);
@@ -59,7 +78,7 @@ export function SocialMedia() {
   ] as const;
 
   return (
-    <Box sx={{ backgroundColor: 'background.paper' }}>
+    <PageWrapper>
       <CardContainer
         title={t('settingForm.titleSocial')}
         subtitle={t('settingForm.descriptionSocial')}
@@ -196,7 +215,7 @@ export function SocialMedia() {
                 </Box>
               </Box>
 
-              <IconButton size="small">
+              <IconButton size="small" aria-label="Delete">
                 <Trash size="20" color="gray" variant="Outline" />
               </IconButton>
             </Box>
@@ -207,10 +226,18 @@ export function SocialMedia() {
           open={openDialog}
           onClose={handleCloseDialog}
           fullWidth
-          maxWidth="xs"
           fullScreen={fullScreen}
-          sx={{
+          maxWidth={computedMaxWidth}
-            '& .MuiDialog-paper': { m: { xs: 1, sm: 'auto' }, borderRadius: 2 },
+          scroll="paper"
+          keepMounted
+          TransitionComponent={fullScreen ? MobileSlide : undefined}
+          PaperProps={{
+            sx: {
+              m: { xs: 0, sm: 2 },
+              borderRadius: { xs: 0, sm: 2 },
+              width: { xs: '100%', sm: 'auto' },
+              height: { xs: '100%', sm: 'auto' },
+            },
           }}
         >
           <DialogTitle
@@ -221,21 +248,28 @@ export function SocialMedia() {
               fontWeight: 'bold',
               fontSize: '16px',
               gap: 1,
+              p: { xs: 1.5, sm: 2 },
+              position: { xs: 'sticky', sm: 'static' },
+              top: 0,
+              bgcolor: 'background.paper',
+              zIndex: 1,
             }}
           >
-            <IconButton onClick={handleCloseDialog}>
+            <IconButton onClick={handleCloseDialog} aria-label="Close">
               <CloseSquare size={24} color="#82B1FF" />
             </IconButton>
             {t('settingForm.addEmailButton')}
           </DialogTitle>
 
-          <DialogContent>
+          <DialogContent
-            <Box
+            dividers
             sx={{
               width: '100%',
               display: 'flex',
               flexDirection: 'column',
               gap: 2,
+              px: { xs: 2, sm: 3 },
+              py: { xs: 1.5, sm: 2 },
             }}
           >
             <Box>
@@ -256,24 +290,27 @@ export function SocialMedia() {
               helperText={emailError ? t('settingForm.emailError') : ''}
               label={t('settingForm.email')}
               placeholder="abc@email.com"
-                sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
+              autoComplete="email"
+              inputMode="email"
+              sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+              autoFocus
             />
 
             <Button
               variant="contained"
               fullWidth
-                sx={{ textTransform: 'none', borderRadius: '8px' }}
+              sx={{ textTransform: 'none', borderRadius: 2 }}
               disabled={emailError || emailInput === ''}
             >
               {t('settingForm.verificationCodeButton')}
             </Button>
 
             <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
-                <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
+              <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
-                <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
+              <Typography sx={{ mx: 1, fontSize: 12, color: 'text.secondary' }}>
                 {t('settingForm.or')}
               </Typography>
-                <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
+              <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
             </Box>
 
             <Box
@@ -288,9 +325,9 @@ export function SocialMedia() {
                 sx={{
                   textTransform: 'none',
                   border: 2,
-                    borderColor: '#1976d2',
+                  borderColor: 'primary.main',
-                    color: '#1976d2',
+                  color: 'primary.main',
-                    borderRadius: '8px',
+                  borderRadius: 2,
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -308,9 +345,9 @@ export function SocialMedia() {
                 sx={{
                   textTransform: 'none',
                   border: 2,
-                    borderColor: '#1976d2',
+                  borderColor: 'primary.main',
-                    color: '#1976d2',
+                  color: 'primary.main',
-                    borderRadius: '8px',
+                  borderRadius: 2,
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -324,10 +361,9 @@ export function SocialMedia() {
                 {t('settingForm.apple')}
               </Button>
             </Box>
-            </Box>
           </DialogContent>
         </Dialog>
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }

src/features/profile/routes/SettingPage.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import {
   createBrowserRouter,
   RouterProvider,
@@ -18,7 +19,16 @@ import {
   Sms,
   Menu,
 } from 'iconsax-react';
-import { Box, Typography, useTheme, useMediaQuery } from '@mui/material';
+import {
+  Box,
+  Typography,
+  useTheme,
+  useMediaQuery,
+  Drawer,
+  AppBar,
+  Toolbar,
+  IconButton,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
 import { ActiveDevices } from '../components/activeDevices/ActiveDevices';
@@ -58,19 +68,17 @@ export function Layout() {
   const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
   const location = useLocation();
   const { t } = useTranslation('sideMap');
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
-  const drawerWidth = 274;
+  const contentMaxWidth = '100%';
-  const minimizedWidth = 64;
+  const contentWidthMd = '810px';
-  const navWidth = isMdUp ? drawerWidth : minimizedWidth;
+  const navWidthMd = '274px';
-  const contentWidth = 810;
-  const contentHeight = '78vh';
-  const totalWidth = navWidth + contentWidth;
 
   const navConfig: NavItemConfig[] = [
     {
       text: t('side.account'),
-      getIcon: (isSelected) =>
+      getIcon: (sel) =>
-        isSelected ? (
+        sel ? (
           <ProfileCircle size={24} color="#1976d2" variant="Bold" />
         ) : (
           <ProfileCircle size={24} color="#82B1FF" />
@@ -79,8 +87,8 @@ export function Layout() {
       children: [
         {
           text: t('side.personalInfo'),
-          getIcon: (isSelected) =>
+          getIcon: (sel) =>
-            isSelected ? (
+            sel ? (
               <Personalcard size={24} color="#1976d2" variant="Bold" />
             ) : (
               <Personalcard size={24} color="#82B1FF" />
@@ -89,8 +97,8 @@ export function Layout() {
         },
         {
           text: t('side.phoneNumber'),
-          getIcon: (isSelected) =>
+          getIcon: (sel) =>
-            isSelected ? (
+            sel ? (
               <Mobile size={24} color="#1976d2" variant="Bold" />
             ) : (
               <Mobile size={24} color="#82B1FF" />
@@ -99,8 +107,8 @@ export function Layout() {
         },
         {
           text: t('side.email'),
-          getIcon: (isSelected) =>
+          getIcon: (sel) =>
-            isSelected ? (
+            sel ? (
               <Sms size={24} color="#1976d2" variant="Bold" />
             ) : (
               <Sms size={24} color="#82B1FF" />
@@ -111,8 +119,8 @@ export function Layout() {
     },
     {
       text: t('side.security'),
-      getIcon: (isSelected) =>
+      getIcon: (sel) =>
-        isSelected ? (
+        sel ? (
           <Shield size={24} color="#1976d2" variant="Bold" />
         ) : (
           <Shield size={24} color="#82B1FF" />
@@ -121,8 +129,8 @@ export function Layout() {
       children: [
         {
           text: t('side.password'),
-          getIcon: (isSelected) =>
+          getIcon: (sel) =>
-            isSelected ? (
+            sel ? (
               <PasswordCheck size={24} color="#1976d2" variant="Bold" />
             ) : (
               <PasswordCheck size={24} color="#82B1FF" />
@@ -131,8 +139,8 @@ export function Layout() {
         },
         {
           text: t('side.verifiedAddress'),
-          getIcon: (isSelected) =>
+          getIcon: (sel) =>
-            isSelected ? (
+            sel ? (
               <LocationTick size={24} color="#1976d2" variant="Bold" />
             ) : (
               <LocationTick size={24} color="#82B1FF" />
@@ -141,8 +149,8 @@ export function Layout() {
         },
         {
           text: t('side.recentLogins'),
-          getIcon: (isSelected) =>
+          getIcon: (sel) =>
-            isSelected ? (
+            sel ? (
               <Devices size={24} color="#1976d2" variant="Bold" />
             ) : (
               <Devices size={24} color="#82B1FF" />
@@ -153,8 +161,8 @@ export function Layout() {
     },
     {
       text: t('side.activeDevices'),
-      getIcon: (isSelected) =>
+      getIcon: (sel) =>
-        isSelected ? (
+        sel ? (
           <Devices size={24} color="#1976d2" variant="Bold" />
         ) : (
           <Devices size={24} color="#82B1FF" />
@@ -163,8 +171,8 @@ export function Layout() {
     },
     {
       text: t('side.settings'),
-      getIcon: (isSelected) =>
+      getIcon: (sel) =>
-        isSelected ? (
+        sel ? (
           <SettingIcon size={24} color="#1976d2" variant="Bold" />
         ) : (
           <SettingIcon size={24} color="#82B1FF" />
@@ -177,34 +185,42 @@ export function Layout() {
     <Box
       display="flex"
       flexDirection="column"
-      minHeight="100vh"
       justifyContent="center"
       alignItems="center"
+      minHeight="100vh"
       px={{ xs: 2, sm: 3 }}
     >
-      <Box>
+      {!isMdUp && (
-        <Box
+        <AppBar position="static">
-          width={totalWidth}
+          <Toolbar sx={{ backgroundColor: 'background.paper' }}>
-          maxWidth="100%"
+            <IconButton
-          mx="auto"
+              edge="start"
-          display="flex"
+              color="inherit"
-          flexDirection="row"
+              onClick={() => setDrawerOpen(true)}
             >
-          <Box position="relative" width={navWidth}>
+              <Menu size={24} color="#1976d2" variant="Bold" />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
+      )}
+      <Box display="flex" width="100%" maxWidth="100vw">
+        {isMdUp && (
+          <Box flex="0 0 auto" width={navWidthMd} position="relative">
             <SideNav
               navConfig={navConfig}
-              header={isMdUp ? <Header /> : <Menu size={24} color="#1976d2" />}
+              header={<Header />}
               activePath={location.pathname + location.hash}
-              sideNavVariant={isMdUp ? 'full' : 'minimized'}
+              sideNavVariant="full"
               positioning="absolute"
-              // drawerWidth={drawerWidth}
-              // minimizedWidth={minimizedWidth}
             />
           </Box>
+        )}
         <Box
+          flexGrow={1}
+          width="auto"
+          maxWidth={contentMaxWidth}
+          height={{ xs: 'auto', md: '78vh' }}
           sx={{
-              width: contentWidth,
-              height: contentHeight,
             bgcolor: 'background.paper',
             px: { xs: 2, sm: 3 },
             overflowY: 'auto',
@@ -213,7 +229,22 @@ export function Layout() {
           <Outlet />
         </Box>
       </Box>
+      {!isMdUp && (
+        <Drawer
+          anchor="left"
+          open={drawerOpen}
+          onClose={() => setDrawerOpen(false)}
+        >
+          <Box width={navWidthMd}>
+            <SideNav
+              navConfig={navConfig}
+              header={<Header />}
+              activePath={location.pathname + location.hash}
+              sideNavVariant="full"
+            />
           </Box>
+        </Drawer>
+      )}
     </Box>
   );
 }
@@ -227,16 +258,7 @@ const router = createBrowserRouter([
       {
         path: '/profile',
         element: (
-          <Box
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            sx={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-              px: { xs: 2, sm: 0 },
-            }}
-          >
             <div id="info">
               <PersonalInformation />
             </div>
@@ -252,15 +274,7 @@ const router = createBrowserRouter([
       {
         path: '/security',
         element: (
-          <Box
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            sx={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-            }}
-          >
             <div id="password">
               <PasswordSecurity />
             </div>
@@ -271,22 +285,8 @@ const router = createBrowserRouter([
           </Box>
         ),
       },
-      {
+      { path: '/devices', element: <ActiveDevices /> },
-        path: '/devices',
+      { path: '/setting', element: <Setting /> },
-        element: (
-          <Box sx={{ width: '100%', height: '100%' }}>
-            <ActiveDevices />
-          </Box>
-        ),
-      },
-      {
-        path: '/setting',
-        element: (
-          <Box sx={{ width: '100%', height: '100%' }}>
-            <Setting />
-          </Box>
-        ),
-      },
     ],
   },
 ]);