Enhance Resume Editor with responsive design improvements, including mobile drawer integration for sidebars, updated button styles, and layout adjustments for better usability across devices.

Author: AmrNabel

src/components/Editor.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Box, IconButton, Typography } from '@mui/material'
+import { Box, IconButton, Typography, useTheme, useMediaQuery } from '@mui/material'
 import { Link, useNavigate, useLocation } from 'react-router-dom'
 import {
   SVGRightLine,
@@ -31,6 +31,8 @@ const Sidebar = ({ onToggle, isExpanded }: SidebarProps) => {
   const navigate = useNavigate()
   const location = useLocation()
   const [showNotification, setShowNotification] = useState(false)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const dispatch = useDispatch() //NOSONAR
   const isAuthenticated = useSelector((state: RootState) => state.auth.isAuthenticated)
@@ -44,11 +46,16 @@ const Sidebar = ({ onToggle, isExpanded }: SidebarProps) => {
     else setSelectedItem('')
   }, [location.pathname])
 
+  const sidebarWidth = {
+    collapsed: isMobile ? 30 : 48,
+    expanded: isMobile ? 160 : 200
+  }
+
   const boxStyles = {
     display: 'flex',
     alignItems: 'center',
-    gap: '20px',
-    width: isExpanded ? '200px' : '48px',
+    gap: isMobile ? '10px' : '20px',
+    width: isExpanded ? sidebarWidth.expanded : sidebarWidth.collapsed,
     justifyContent: 'flex-start',
     borderRadius: '8px'
   }
@@ -84,10 +91,12 @@ const Sidebar = ({ onToggle, isExpanded }: SidebarProps) => {
   const getIconStyles = (key: string) => ({
     '& svg path': { fill: selectedItem === key ? '#361F7D' : undefined }
   })
+
   const getTextStyles = (key: string) => ({
     ...ui,
     color: selectedItem === key ? '#361F7D' : '#FFF'
   })
+
   const getButtonStyles = (key: string) => ({
     backgroundColor: selectedItem === key ? '#F3F4F6' : 'transparent',
     borderRadius: '8px',
@@ -105,7 +114,14 @@ const Sidebar = ({ onToggle, isExpanded }: SidebarProps) => {
         {isExpanded && (
           <Link to='/' style={{ display: 'flex', alignItems: 'center' }}>
             <img src={logo} alt='Résumé Author' style={{ height: '50px' }} />
-            <Typography sx={{ ...ui, fontSize: '20px', mx: '10px', color: '#FFF' }}>
+            <Typography
+              sx={{
+                ...ui,
+                fontSize: { xs: '14px', md: '20px' },
+                mx: '10px',
+                color: '#FFF'
+              }}
+            >
               Resume Author
             </Typography>
           </Link>
@@ -158,8 +174,8 @@ const Sidebar = ({ onToggle, isExpanded }: SidebarProps) => {
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          gap: '15px',
-          width: isExpanded ? '200px' : '48px',
+          gap: isMobile ? '10px' : '15px',
+          width: isExpanded ? sidebarWidth.expanded : sidebarWidth.collapsed,
           transition: 'width 0.3s ease'
         }}
       >

src/components/Layout/Sidebar.tsx

@@ -10,18 +10,33 @@ export const SidebarContainer = styled(Box)(({ theme }) => ({
   left: 0,
   top: 0,
   transition: 'width 0.3s ease',
+  [theme.breakpoints.down('md')]: {
+    width: 28,
+    padding: theme.spacing(2, 2)
+  },
   '&.expanded': {
-    width: 250
+    width: 250,
+    [theme.breakpoints.down('md')]: {
+      width: 200
+    }
   }
 }))
 
 export const MainContent = styled(Box)(({ theme }) => ({
-  marginLeft: 90,
+  marginLeft: 75,
   minHeight: '100vh',
   width: 'calc(100% - 90px)',
   transition: 'width 0.3s ease',
+  [theme.breakpoints.down('md')]: {
+    width: 'calc(100% - 90px)',
+    alignSelf: 'center'
+  },
   '&.sidebar-expanded': {
-    marginLeft: 300
+    marginLeft: 300,
+    [theme.breakpoints.down('md')]: {
+      marginLeft: 240,
+      width: 'calc(100% - 240px)'
+    }
   }
 }))
 

src/components/Layout/styles.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, Button } from '@mui/material'
+import { Box, Typography, Button, useTheme, useMediaQuery } from '@mui/material'
 import ResumeCard from './ResumeCard'
 import { Link, useNavigate } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
@@ -9,6 +9,7 @@ import useDraftResume from '../hooks/useDraftResume'
 import { logout } from '../tools/auth'
 import AuthErrorDisplay from './common/AuthErrorDisplay'
 import { clearAuth } from '../redux/slices/auth'
+
 const buttonStyles = {
   background: '#3A35A2',
   padding: '10px 31px',
@@ -27,6 +28,9 @@ const buttonStyles = {
 const ResumeScreen: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>()
   const navigate = useNavigate()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+
   const { signed, unsigned, status, error } = useSelector(
     (state: RootState) => state.myresumes
   )
@@ -56,9 +60,11 @@ const ResumeScreen: React.FC = () => {
       setFriendlyError(null)
     } else if (status === 'failed') {
       // Handle specific error messages from fetchUserResumes
-      if (error?.includes('No authentication token found') ||
-          error?.includes('Authentication expired') ||
-          error?.includes('Session expired')) {
+      if (
+        error?.includes('No authentication token found') ||
+        error?.includes('Authentication expired') ||
+        error?.includes('Session expired')
+      ) {
         setFriendlyError(error)
         if (isAuthenticated) {
           handleLogout()
@@ -78,9 +84,7 @@ const ResumeScreen: React.FC = () => {
         setFriendlyError('Please log in to view your resumes.')
       } else {
         // For any other errors, show the error message if available
-        setFriendlyError(
-          error || 'An error occurred while loading your resumes.'
-        )
+        setFriendlyError(error || 'An error occurred while loading your resumes.')
       }
     } else if (status === 'succeeded') {
       setFriendlyError(null)
@@ -104,36 +108,64 @@ const ResumeScreen: React.FC = () => {
     <Box
       sx={{
         mx: 'auto',
-        p: 3,
+        p: { xs: 0, md: 3 },
         display: 'flex',
         flexDirection: 'column',
-        marginInline: 3,
+        marginInline: { xs: 1, md: 3 },
         gap: 2
       }}
     >
       <Box
         sx={{
           display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
           justifyContent: 'space-between',
-          alignItems: 'center',
-          mb: 4,
-          mt: 2
+          alignItems: { xs: 'flex-start', md: 'center' },
+          mb: { xs: 2, md: 4 },
+          mt: 2,
+          gap: { xs: 2, md: 0 }
         }}
       >
-        <Typography variant='h4' sx={{ color: '#2E2E48', fontWeight: 700 }}>
+        <Typography
+          variant='h4'
+          sx={{
+            color: '#2E2E48',
+            fontWeight: 700,
+            fontSize: { xs: '24px', sm: '28px', md: '32px' }
+          }}
+        >
           My Resumes
         </Typography>
-        <Box sx={{ display: 'flex', gap: 2 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: { xs: 1, md: 2 },
+            flexDirection: { xs: 'column', sm: 'row' },
+            width: { xs: '100%', sm: 'auto' }
+          }}
+        >
           {isAuthenticated && (
             <>
-              <Link style={buttonStyles} to='/resume/new'>
+              <Link
+                style={{
+                  ...buttonStyles,
+                  padding: isMobile ? '8px 20px' : '10px 31px',
+                  fontSize: isMobile ? '14px' : '16px',
+                  textAlign: 'center',
+                  display: 'block'
+                }}
+                to='/resume/new'
+              >
                 Create new resume
               </Link>
               <Button
                 onClick={handleLogout}
                 sx={{
                   ...buttonStyles,
                   textTransform: 'capitalize',
+                  padding: isMobile ? '8px 20px' : '10px 31px',
+                  fontSize: isMobile ? '14px' : '16px',
+                  width: { xs: '100%', sm: 'auto' },
                   '&:hover': {
                     background: '#322e8e',
                     border: '3px solid #322e8e'
@@ -159,7 +191,15 @@ const ResumeScreen: React.FC = () => {
         (status === 'succeeded' || status === 'idle') &&
         signed.length > 0 && (
           <>
-            <Typography variant='h6' sx={{ color: '#2E2E48', fontWeight: 600, mt: 2 }}>
+            <Typography
+              variant='h6'
+              sx={{
+                color: '#2E2E48',
+                fontWeight: 600,
+                mt: 2,
+                fontSize: { xs: '18px', md: '20px' }
+              }}
+            >
               Signed Resumes
             </Typography>
             {signed.map(resume => (
@@ -180,7 +220,15 @@ const ResumeScreen: React.FC = () => {
         (status === 'succeeded' || status === 'idle') &&
         draftResumes.length > 0 && (
           <>
-            <Typography variant='h6' sx={{ color: '#2E2E48', fontWeight: 600, mt: 2 }}>
+            <Typography
+              variant='h6'
+              sx={{
+                color: '#2E2E48',
+                fontWeight: 600,
+                mt: 2,
+                fontSize: { xs: '18px', md: '20px' }
+              }}
+            >
               Draft Resumes
             </Typography>
             {draftResumes.map(resume => (