fix: responsiveness of sideNav component

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 minimizedWidth = 64;
-  const navWidth = isMdUp ? drawerWidth : minimizedWidth;
-  const contentWidth = 810;
-  const contentHeight = '78vh';
-  const totalWidth = navWidth + contentWidth;
+  const contentMaxWidth = '100%';
+  const contentWidthMd = '810px';
+  const navWidthMd = '274px';
 
   const navConfig: NavItemConfig[] = [
     {
       text: t('side.account'),
-      getIcon: (isSelected) =>
-        isSelected ? (
+      getIcon: (sel) =>
+        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) =>
-            isSelected ? (
+          getIcon: (sel) =>
+            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) =>
-            isSelected ? (
+          getIcon: (sel) =>
+            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) =>
-            isSelected ? (
+          getIcon: (sel) =>
+            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) =>
-        isSelected ? (
+      getIcon: (sel) =>
+        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) =>
-            isSelected ? (
+          getIcon: (sel) =>
+            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) =>
-            isSelected ? (
+          getIcon: (sel) =>
+            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) =>
-            isSelected ? (
+          getIcon: (sel) =>
+            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) =>
-        isSelected ? (
+      getIcon: (sel) =>
+        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) =>
-        isSelected ? (
+      getIcon: (sel) =>
+        sel ? (
           <SettingIcon size={24} color="#1976d2" variant="Bold" />
         ) : (
           <SettingIcon size={24} color="#82B1FF" />
@@ -177,43 +185,66 @@ export function Layout() {
     <Box
       display="flex"
       flexDirection="column"
-      minHeight="100vh"
       justifyContent="center"
       alignItems="center"
+      minHeight="100vh"
       px={{ xs: 2, sm: 3 }}
     >
-      <Box>
-        <Box
-          width={totalWidth}
-          maxWidth="100%"
-          mx="auto"
-          display="flex"
-          flexDirection="row"
-        >
-          <Box position="relative" width={navWidth}>
+      {!isMdUp && (
+        <AppBar position="static">
+          <Toolbar sx={{ backgroundColor: 'background.paper' }}>
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={() => setDrawerOpen(true)}
+            >
+              <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
-            sx={{
-              width: contentWidth,
-              height: contentHeight,
-              bgcolor: 'background.paper',
-              px: { xs: 2, sm: 3 },
-              overflowY: 'auto',
-            }}
-          >
-            <Outlet />
-          </Box>
+        )}
+        <Box
+          flexGrow={1}
+          width="auto"
+          maxWidth={contentMaxWidth}
+          height={{ xs: 'auto', md: '78vh' }}
+          sx={{
+            bgcolor: 'background.paper',
+            px: { xs: 2, sm: 3 },
+            overflowY: 'auto',
+          }}
+        >
+          <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
-            sx={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-              px: { xs: 2, sm: 0 },
-            }}
-          >
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <div id="info">
               <PersonalInformation />
             </div>
@@ -252,15 +274,7 @@ const router = createBrowserRouter([
       {
         path: '/security',
         element: (
-          <Box
-            sx={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-            }}
-          >
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <div id="password">
               <PasswordSecurity />
             </div>
@@ -271,22 +285,8 @@ const router = createBrowserRouter([
           </Box>
         ),
       },
-      {
-        path: '/devices',
-        element: (
-          <Box sx={{ width: '100%', height: '100%' }}>
-            <ActiveDevices />
-          </Box>
-        ),
-      },
-      {
-        path: '/setting',
-        element: (
-          <Box sx={{ width: '100%', height: '100%' }}>
-            <Setting />
-          </Box>
-        ),
-      },
+      { path: '/devices', element: <ActiveDevices /> },
+      { path: '/setting', element: <Setting /> },
     ],
   },
 ]);