Merge pull request #1295 from jcardus/drawer-width

Optimize drawer width to reduce wasted space in reports and settings

src/common/components/MenuItem.jsx

@@ -0,0 +1,22 @@
+import makeStyles from '@mui/styles/makeStyles';
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { Link } from 'react-router-dom';
+import React from 'react';
+
+const useStyles = makeStyles(() => ({
+  menuItemText: {
+    whiteSpace: 'nowrap',
+  },
+}));
+
+const MenuItem = ({ title, link, icon, selected }) => {
+  const classes = useStyles();
+  return (
+    <ListItemButton key={link} component={Link} to={link} selected={selected}>
+      <ListItemIcon>{icon}</ListItemIcon>
+      <ListItemText primary={title} className={classes.menuItemText} />
+    </ListItemButton>
+  );
+};
+
+export default MenuItem;

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 ? `calc(${theme.spacing(8)} + 1px)` : 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,17 @@ 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 +91,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/reports/components/ReportsMenu.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  Divider, List, ListItemButton, ListItemIcon, ListItemText,
-} from '@mui/material';
+import { Divider, List } from '@mui/material';
 import StarIcon from '@mui/icons-material/Star';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import PauseCircleFilledIcon from '@mui/icons-material/PauseCircleFilled';
@@ -13,18 +11,10 @@ import BarChartIcon from '@mui/icons-material/BarChart';
 import RouteIcon from '@mui/icons-material/Route';
 import EventRepeatIcon from '@mui/icons-material/EventRepeat';
 import NotesIcon from '@mui/icons-material/Notes';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useAdministrator, useRestriction } from '../../common/util/permissions';
-
-const MenuItem = ({
-  title, link, icon, selected,
-}) => (
-  <ListItemButton key={link} component={Link} to={link} selected={selected}>
-    <ListItemIcon>{icon}</ListItemIcon>
-    <ListItemText primary={title} />
-  </ListItemButton>
-);
+import MenuItem from '../../common/components/MenuItem';
 
 const ReportsMenu = () => {
   const t = useTranslation();

src/settings/components/SettingsMenu.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Divider, List, ListItemButton, ListItemIcon, ListItemText,
+  Divider, List,
 } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import CreateIcon from '@mui/icons-material/Create';
@@ -15,22 +15,14 @@ import PublishIcon from '@mui/icons-material/Publish';
 import SmartphoneIcon from '@mui/icons-material/Smartphone';
 import HelpIcon from '@mui/icons-material/Help';
 import CampaignIcon from '@mui/icons-material/Campaign';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import {
   useAdministrator, useManager, useRestriction,
 } from '../../common/util/permissions';
 import useFeatures from '../../common/util/useFeatures';
-
-const MenuItem = ({
-  title, link, icon, selected,
-}) => (
-  <ListItemButton key={link} component={Link} to={link} selected={selected}>
-    <ListItemIcon>{icon}</ListItemIcon>
-    <ListItemText primary={title} />
-  </ListItemButton>
-);
+import MenuItem from '../../common/components/MenuItem';
 
 const SettingsMenu = () => {
   const t = useTranslation();