fix: sidebar style

src/features/profile/routes/SettingPage.tsx

@@ -16,6 +16,7 @@ import {
   Setting as SettingIcon,
   Shield,
   Sms,
+  Menu,
 } from 'iconsax-react';
 import { Box, Typography, useTheme, useMediaQuery } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -61,68 +62,126 @@ export function Layout() {
   const drawerWidth = 274;
   const minimizedWidth = 64;
   const navWidth = isMdUp ? drawerWidth : minimizedWidth;
-  const contentWidth = 790;
+  const contentWidth = 810;
+  const contentHeight = '78vh';
   const totalWidth = navWidth + contentWidth;
 
   const navConfig: NavItemConfig[] = [
     {
       text: t('side.account'),
-      icon: <ProfileCircle size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <ProfileCircle size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <ProfileCircle size={24} color="#82B1FF" />
+        ),
       path: '/profile',
       children: [
         {
           text: t('side.personalInfo'),
-          icon: <Personalcard size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Personalcard size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Personalcard size={24} color="#82B1FF" />
+            ),
           path: '/profile#info',
         },
         {
           text: t('side.phoneNumber'),
-          icon: <Mobile size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Mobile size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Mobile size={24} color="#82B1FF" />
+            ),
           path: '/profile#contact-info',
         },
         {
           text: t('side.email'),
-          icon: <Sms size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Sms size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Sms size={24} color="#82B1FF" />
+            ),
           path: '/profile#email',
         },
       ],
     },
     {
       text: t('side.security'),
-      icon: <Shield size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <Shield size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <Shield size={24} color="#82B1FF" />
+        ),
       path: '/security',
       children: [
         {
           text: t('side.password'),
-          icon: <PasswordCheck size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <PasswordCheck size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <PasswordCheck size={24} color="#82B1FF" />
+            ),
           path: '/security#password',
         },
         {
           text: t('side.verifiedAddress'),
-          icon: <LocationTick size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <LocationTick size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <LocationTick size={24} color="#82B1FF" />
+            ),
           path: '/security#locations',
         },
         {
           text: t('side.recentLogins'),
-          icon: <Devices size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Devices size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Devices size={24} color="#82B1FF" />
+            ),
           path: '/security#sessions',
         },
       ],
     },
     {
       text: t('side.activeDevices'),
-      icon: <Devices size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <Devices size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <Devices size={24} color="#82B1FF" />
+        ),
       path: '/devices',
     },
     {
       text: t('side.settings'),
-      icon: <SettingIcon size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <SettingIcon size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <SettingIcon size={24} color="#82B1FF" />
+        ),
       path: '/setting',
     },
   ];
 
   return (
-    <Box display="flex" flexDirection="column" minHeight="100vh">
+    <Box
+      display="flex"
+      flexDirection="column"
+      minHeight="100vh"
+      justifyContent="center"
+      alignItems="center"
+      px={{ xs: 2, sm: 3 }}
+    >
       <Box>
         <Box
           width={totalWidth}
@@ -134,7 +193,7 @@ export function Layout() {
           <Box position="relative" width={navWidth}>
             <SideNav
               navConfig={navConfig}
-              header={<Header />}
+              header={isMdUp ? <Header /> : <Menu size={24} color="#1976d2" />}
               activePath={location.pathname + location.hash}
               sideNavVariant={isMdUp ? 'full' : 'minimized'}
               positioning="absolute"
@@ -143,10 +202,13 @@ export function Layout() {
             />
           </Box>
           <Box
-            // flex={1}
-            maxWidth={contentWidth}
-            width="100%"
-            // px={{ xs: 2, sm: 3 }}
+            sx={{
+              width: contentWidth,
+              height: contentHeight,
+              bgcolor: 'background.paper',
+              px: { xs: 2, sm: 3 },
+              overflowY: 'auto',
+            }}
           >
             <Outlet />
           </Box>
@@ -165,7 +227,16 @@ const router = createBrowserRouter([
       {
         path: '/profile',
         element: (
-          <>
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              px: { xs: 2, sm: 0 },
+            }}
+          >
             <div id="info">
               <PersonalInformation />
             </div>
@@ -175,13 +246,21 @@ const router = createBrowserRouter([
             <div id="email">
               <SocialMedia />
             </div>
-          </>
+          </Box>
         ),
       },
       {
         path: '/security',
         element: (
-          <>
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+            }}
+          >
             <div id="password">
               <PasswordSecurity />
             </div>
@@ -189,11 +268,25 @@ const router = createBrowserRouter([
             <div id="sessions">
               <RecentLogins />
             </div>
-          </>
+          </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 /> },
     ],
   },
 ]);