From 15b0e3846142e42734ee79963b256af98091449c Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 12:04:18 +0000 Subject: [PATCH 1/8] Toggle drawer --- src/common/components/PageLayout.jsx | 28 +++++++++++++++++++----- src/common/theme/dimensions.js | 1 + src/reports/components/ReportsMenu.jsx | 2 +- src/settings/components/SettingsMenu.jsx | 2 +- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/common/components/PageLayout.jsx b/src/common/components/PageLayout.jsx index e81c975402..d25ae2eb4e 100644 --- a/src/common/components/PageLayout.jsx +++ b/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,7 +72,8 @@ 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(); @@ -74,6 +81,10 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { const [openDrawer, setOpenDrawer] = useState(false); + const toggleDrawer = () => { + setMiniVariant(!miniVariant); + }; + return desktop ? (
{ classes={{ paper: classes.desktopDrawer }} > - navigate('/')}> - + {!miniVariant && ( + <> + navigate('/')}> + + + + + )} + + {miniVariant ? : } - {menu} diff --git a/src/common/theme/dimensions.js b/src/common/theme/dimensions.js index 4930803a09..558893911e 100644 --- a/src/common/theme/dimensions.js +++ b/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', diff --git a/src/reports/components/ReportsMenu.jsx b/src/reports/components/ReportsMenu.jsx index a45a4500f1..fedaac5ed7 100644 --- a/src/reports/components/ReportsMenu.jsx +++ b/src/reports/components/ReportsMenu.jsx @@ -22,7 +22,7 @@ const MenuItem = ({ }) => ( {icon} - + ); diff --git a/src/settings/components/SettingsMenu.jsx b/src/settings/components/SettingsMenu.jsx index 3d0cbaf237..7cc263e7e8 100644 --- a/src/settings/components/SettingsMenu.jsx +++ b/src/settings/components/SettingsMenu.jsx @@ -28,7 +28,7 @@ const MenuItem = ({ }) => ( {icon} - + ); From 547dafb6af1ee48d1c38f59342400df41839cabf Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 16:47:04 +0000 Subject: [PATCH 2/8] Use theme spacing for mini variant with --- src/common/components/PageLayout.jsx | 6 ++---- src/common/theme/dimensions.js | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/common/components/PageLayout.jsx b/src/common/components/PageLayout.jsx index d25ae2eb4e..2b74a2d43f 100644 --- a/src/common/components/PageLayout.jsx +++ b/src/common/components/PageLayout.jsx @@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({ flexDirection: 'column', }, desktopDrawer: { - width: (props) => (props.miniVariant ? theme.dimensions.miniDrawerWidthDesktop : theme.dimensions.drawerWidthDesktop), + width: (props) => (props.miniVariant ? `calc(${theme.spacing(7)} + 1px)` : theme.dimensions.drawerWidthDesktop), transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, @@ -81,9 +81,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { const [openDrawer, setOpenDrawer] = useState(false); - const toggleDrawer = () => { - setMiniVariant(!miniVariant); - }; + const toggleDrawer = () => setMiniVariant(!miniVariant); return desktop ? (
diff --git a/src/common/theme/dimensions.js b/src/common/theme/dimensions.js index 558893911e..4930803a09 100644 --- a/src/common/theme/dimensions.js +++ b/src/common/theme/dimensions.js @@ -2,7 +2,6 @@ export default { sidebarWidth: '28%', sidebarWidthTablet: '52px', drawerWidthDesktop: '360px', - miniDrawerWidthDesktop: '56px', drawerWidthTablet: '320px', drawerHeightPhone: '250px', filterFormWidth: '160px', From f4cef90cf6e7516d219a3a3cd3a2b5b5e60ff30f Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 17:01:41 +0000 Subject: [PATCH 3/8] Use class instead of sx --- src/reports/components/ReportsMenu.jsx | 22 ++++++++++++++++------ src/settings/components/SettingsMenu.jsx | 22 ++++++++++++++++------ 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/reports/components/ReportsMenu.jsx b/src/reports/components/ReportsMenu.jsx index fedaac5ed7..956d1fcd2d 100644 --- a/src/reports/components/ReportsMenu.jsx +++ b/src/reports/components/ReportsMenu.jsx @@ -14,17 +14,27 @@ 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 makeStyles from '@mui/styles/makeStyles'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useAdministrator, useRestriction } from '../../common/util/permissions'; +const useStyles = makeStyles({ + menuItemText: { + whiteSpace: 'nowrap', + }, +}); + const MenuItem = ({ title, link, icon, selected, -}) => ( - - {icon} - - -); +}) => { + const classes = useStyles(); + return ( + + {icon} + + + ); +}; const ReportsMenu = () => { const t = useTranslation(); diff --git a/src/settings/components/SettingsMenu.jsx b/src/settings/components/SettingsMenu.jsx index 7cc263e7e8..b2970df88e 100644 --- a/src/settings/components/SettingsMenu.jsx +++ b/src/settings/components/SettingsMenu.jsx @@ -17,20 +17,30 @@ import HelpIcon from '@mui/icons-material/Help'; import CampaignIcon from '@mui/icons-material/Campaign'; import { Link, useLocation } from 'react-router-dom'; import { useSelector } from 'react-redux'; +import makeStyles from '@mui/styles/makeStyles'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useAdministrator, useManager, useRestriction, } from '../../common/util/permissions'; import useFeatures from '../../common/util/useFeatures'; +const useStyles = makeStyles({ + menuItemText: { + whiteSpace: 'nowrap', + }, +}); + const MenuItem = ({ title, link, icon, selected, -}) => ( - - {icon} - - -); +}) => { + const classes = useStyles(); + return ( + + {icon} + + + ); +}; const SettingsMenu = () => { const t = useTranslation(); From 736f6fd94c98ed500de1e46c9b33ee7262b183da Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 17:07:19 +0000 Subject: [PATCH 4/8] reformat --- src/common/components/PageLayout.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/common/components/PageLayout.jsx b/src/common/components/PageLayout.jsx index 2b74a2d43f..bf8af1b3e7 100644 --- a/src/common/components/PageLayout.jsx +++ b/src/common/components/PageLayout.jsx @@ -92,12 +92,12 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { > {!miniVariant && ( - <> - navigate('/')}> - - - - + <> + navigate('/')}> + + + + )} {miniVariant ? : } From 5e2b79a879dc45643694735e8d4d8c4e0ff36f16 Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 20:15:27 +0000 Subject: [PATCH 5/8] Extract MenuItem --- src/common/components/MenuItem.jsx | 22 ++++++++++++++++++++ src/reports/components/ReportsMenu.jsx | 26 +++--------------------- src/settings/components/SettingsMenu.jsx | 22 ++------------------ 3 files changed, 27 insertions(+), 43 deletions(-) create mode 100644 src/common/components/MenuItem.jsx diff --git a/src/common/components/MenuItem.jsx b/src/common/components/MenuItem.jsx new file mode 100644 index 0000000000..cae2ff3663 --- /dev/null +++ b/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 MenuItem = ({ + title, link, icon, selected, +}) => { + const classes = makeStyles({ + menuItemText: { + whiteSpace: 'nowrap', + }, + }); + return ( + + {icon} + + + ); +}; + +export default MenuItem; diff --git a/src/reports/components/ReportsMenu.jsx b/src/reports/components/ReportsMenu.jsx index 956d1fcd2d..f987603786 100644 --- a/src/reports/components/ReportsMenu.jsx +++ b/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,28 +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 makeStyles from '@mui/styles/makeStyles'; +import { useLocation } from 'react-router-dom'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useAdministrator, useRestriction } from '../../common/util/permissions'; - -const useStyles = makeStyles({ - menuItemText: { - whiteSpace: 'nowrap', - }, -}); - -const MenuItem = ({ - title, link, icon, selected, -}) => { - const classes = useStyles(); - return ( - - {icon} - - - ); -}; +import MenuItem from '../../common/components/MenuItem'; const ReportsMenu = () => { const t = useTranslation(); diff --git a/src/settings/components/SettingsMenu.jsx b/src/settings/components/SettingsMenu.jsx index b2970df88e..916f9d3267 100644 --- a/src/settings/components/SettingsMenu.jsx +++ b/src/settings/components/SettingsMenu.jsx @@ -15,32 +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 makeStyles from '@mui/styles/makeStyles'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useAdministrator, useManager, useRestriction, } from '../../common/util/permissions'; import useFeatures from '../../common/util/useFeatures'; - -const useStyles = makeStyles({ - menuItemText: { - whiteSpace: 'nowrap', - }, -}); - -const MenuItem = ({ - title, link, icon, selected, -}) => { - const classes = useStyles(); - return ( - - {icon} - - - ); -}; +import MenuItem from '../../common/components/MenuItem'; const SettingsMenu = () => { const t = useTranslation(); From 91612741272a709e6b68736ebabe81d89698b7e1 Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 20:16:13 +0000 Subject: [PATCH 6/8] Unused import --- src/settings/components/SettingsMenu.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/components/SettingsMenu.jsx b/src/settings/components/SettingsMenu.jsx index 916f9d3267..eff3eab37f 100644 --- a/src/settings/components/SettingsMenu.jsx +++ b/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'; From 613e7ec69ba86947725f87c3a0540f5fe6824a72 Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 20:49:56 +0000 Subject: [PATCH 7/8] Use mui mini variant example correctly (spacing(8)) --- src/common/components/PageLayout.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/PageLayout.jsx b/src/common/components/PageLayout.jsx index bf8af1b3e7..084f1461bb 100644 --- a/src/common/components/PageLayout.jsx +++ b/src/common/components/PageLayout.jsx @@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({ flexDirection: 'column', }, desktopDrawer: { - width: (props) => (props.miniVariant ? `calc(${theme.spacing(7)} + 1px)` : 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, From 21e598e59b11073966ca5c36d3103f2321523fe8 Mon Sep 17 00:00:00 2001 From: jcardus Date: Thu, 14 Nov 2024 23:56:17 +0000 Subject: [PATCH 8/8] makeStyles outside component --- src/common/components/MenuItem.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/common/components/MenuItem.jsx b/src/common/components/MenuItem.jsx index cae2ff3663..dae4ec42ff 100644 --- a/src/common/components/MenuItem.jsx +++ b/src/common/components/MenuItem.jsx @@ -3,14 +3,14 @@ import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'; import { Link } from 'react-router-dom'; import React from 'react'; -const MenuItem = ({ - title, link, icon, selected, -}) => { - const classes = makeStyles({ - menuItemText: { - whiteSpace: 'nowrap', - }, - }); +const useStyles = makeStyles(() => ({ + menuItemText: { + whiteSpace: 'nowrap', + }, +})); + +const MenuItem = ({ title, link, icon, selected }) => { + const classes = useStyles(); return ( {icon}