Optimize drawer width to reduce wasted space in reports and settings

src/common/components/PageLayout.jsx

@@ -12,6 +12,8 @@ import {
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import MenuIcon from '@mui/icons-material/Menu';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from './LocalizationProvider';
@@ -27,7 +29,11 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
   },
   desktopDrawer: {
-    width: theme.dimensions.drawerWidthDesktop,
+    width: (props) => (props.miniVariant ? theme.dimensions.miniDrawerWidthDesktop : theme.dimensions.drawerWidthDesktop),
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
   },
   mobileDrawer: {
     width: theme.dimensions.drawerWidthTablet,
@@ -66,14 +72,19 @@ const PageTitle = ({ breadcrumbs }) => {
 };
 
 const PageLayout = ({ menu, breadcrumbs, children }) => {
-  const classes = useStyles();
+  const [miniVariant, setMiniVariant] = useState(false);
+  const classes = useStyles({ miniVariant });
   const theme = useTheme();
   const navigate = useNavigate();
 
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
 
   const [openDrawer, setOpenDrawer] = useState(false);
 
+  const toggleDrawer = () => {
+    setMiniVariant(!miniVariant);
+  };
+
   return desktop ? (
     <div className={classes.desktopRoot}>
       <Drawer
@@ -82,10 +93,17 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {
         classes={{ paper: classes.desktopDrawer }}
       >
         <Toolbar>
-          <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}>
-            <ArrowBackIcon />
+          {!miniVariant && (
+          <>
+            <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}>
+              <ArrowBackIcon />
+            </IconButton>
+            <PageTitle breadcrumbs={breadcrumbs} />
+          </>
+          )}
+          <IconButton color="inherit" edge="start" sx={{ ml: miniVariant ? -2 : 'auto' }} onClick={toggleDrawer}>
+            {miniVariant ? <ChevronRightIcon /> : <ChevronLeftIcon />}
           </IconButton>
-          <PageTitle breadcrumbs={breadcrumbs} />
         </Toolbar>
         <Divider />
         {menu}

src/common/theme/dimensions.js

@@ -2,6 +2,7 @@ export default {
   sidebarWidth: '28%',
   sidebarWidthTablet: '52px',
   drawerWidthDesktop: '360px',
+  miniDrawerWidthDesktop: '56px',
   drawerWidthTablet: '320px',
   drawerHeightPhone: '250px',
   filterFormWidth: '160px',

src/reports/components/ReportsMenu.jsx

@@ -22,7 +22,7 @@ const MenuItem = ({
 }) => (
   <ListItemButton key={link} component={Link} to={link} selected={selected}>
     <ListItemIcon>{icon}</ListItemIcon>
-    <ListItemText primary={title} />
+    <ListItemText primary={title} sx={{ whiteSpace: 'nowrap' }} />
   </ListItemButton>
 );
 

src/settings/components/SettingsMenu.jsx

@@ -28,7 +28,7 @@ const MenuItem = ({
 }) => (
   <ListItemButton key={link} component={Link} to={link} selected={selected}>
     <ListItemIcon>{icon}</ListItemIcon>
-    <ListItemText primary={title} />
+    <ListItemText primary={title} sx={{ whiteSpace: 'nowrap' }} />
   </ListItemButton>
 );