Extract MenuItem

This commit is contained in:
jcardus 2024-11-14 20:15:27 +00:00
parent 736f6fd94c
commit 5e2b79a879
3 changed files with 27 additions and 43 deletions

View File

@ -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 (
<ListItemButton key={link} component={Link} to={link} selected={selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} className={classes.menuItemText} />
</ListItemButton>
);
};
export default MenuItem;

View File

@ -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 (
<ListItemButton key={link} component={Link} to={link} selected={selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} className={classes.menuItemText} />
</ListItemButton>
);
};
import MenuItem from '../../common/components/MenuItem';
const ReportsMenu = () => {
const t = useTranslation();

View File

@ -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 (
<ListItemButton key={link} component={Link} to={link} selected={selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} className={classes.menuItemText} />
</ListItemButton>
);
};
import MenuItem from '../../common/components/MenuItem';
const SettingsMenu = () => {
const t = useTranslation();