126 lines
3.8 KiB
JavaScript
126 lines
3.8 KiB
JavaScript
/**
|
|
=========================================================
|
|
* Material Dashboard 2 PRO React - v2.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/material-dashboard-pro-react
|
|
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
|
|
|
|
Coded by www.creative-tim.com
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
*/
|
|
|
|
import { Fragment } from 'react';
|
|
|
|
// prop-types is a library for typechecking of props.
|
|
import PropTypes from 'prop-types';
|
|
|
|
// react-router components
|
|
import { Link } from 'react-router-dom';
|
|
|
|
// @mui material components
|
|
import Grid from '@mui/material/Grid';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Divider from '@mui/material/Divider';
|
|
|
|
// Material Dashboard 2 PRO React components
|
|
import MDBox from 'components/MDBox';
|
|
|
|
// Material Dashboard 2 PRO React example components
|
|
import DefaultNavbarCategory from 'examples/Navbars/DefaultNavbar/DefaultNavbarCategory';
|
|
import DefaultNavbarMenu from 'examples/Navbars/DefaultNavbar/DefaultNavbarMenu';
|
|
|
|
// Material Dashboard 2 PRO React context
|
|
import { useMaterialUIController } from 'context';
|
|
|
|
function PagesMenu({ routes, open, close, mobileMenu }) {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
|
|
const renderPagesMenuRoute = (routeName) =>
|
|
routes.map(
|
|
({ key, name, icon, collapse }) =>
|
|
key === routeName && (
|
|
<Fragment key={key}>
|
|
<DefaultNavbarCategory icon={icon} title={name} />
|
|
{collapse.map(({ key: collapseKey, route, name: collapseName }) => (
|
|
<MenuItem
|
|
key={collapseKey}
|
|
component={Link}
|
|
to={route}
|
|
onClick={mobileMenu ? undefined : close}
|
|
>
|
|
<MDBox color="text" pl={2}>
|
|
{collapseName}
|
|
</MDBox>
|
|
</MenuItem>
|
|
))}
|
|
</Fragment>
|
|
)
|
|
);
|
|
|
|
const renderMenuContent = (
|
|
<MDBox
|
|
py={1}
|
|
px={2}
|
|
sx={{
|
|
background: ({ palette: { background, white } }) =>
|
|
darkMode ? background.card : white.main
|
|
}}
|
|
>
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12} lg={3}>
|
|
{renderPagesMenuRoute('dashboards')}
|
|
<MDBox mt={2}>{renderPagesMenuRoute('users')}</MDBox>
|
|
</Grid>
|
|
<Grid item xs={12} lg={4} sx={{ display: 'flex' }}>
|
|
<MDBox display={{ xs: 'none', lg: 'block' }}>
|
|
<Divider orientation="vertical" />
|
|
</MDBox>
|
|
<MDBox>
|
|
{renderPagesMenuRoute('extra')}
|
|
<MDBox mt={2}>{renderPagesMenuRoute('projects')}</MDBox>
|
|
</MDBox>
|
|
</Grid>
|
|
<Grid item xs={12} lg={5} sx={{ display: 'flex' }}>
|
|
<MDBox display={{ xs: 'none', lg: 'block' }}>
|
|
<Divider orientation="vertical" />
|
|
</MDBox>
|
|
<MDBox width="100%">
|
|
{renderPagesMenuRoute('account')}
|
|
<MDBox mt={2}>{renderPagesMenuRoute('profile')}</MDBox>
|
|
</MDBox>
|
|
</Grid>
|
|
</Grid>
|
|
</MDBox>
|
|
);
|
|
|
|
return mobileMenu ? (
|
|
renderMenuContent
|
|
) : (
|
|
<DefaultNavbarMenu open={open} close={close}>
|
|
{renderMenuContent}
|
|
</DefaultNavbarMenu>
|
|
);
|
|
}
|
|
|
|
// Setting default values for the props of PagesMenu
|
|
PagesMenu.defaultProps = {
|
|
mobileMenu: false,
|
|
open: false,
|
|
close: false
|
|
};
|
|
|
|
// Typechecking props for the PagesMenu
|
|
PagesMenu.propTypes = {
|
|
routes: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
open: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
|
close: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
|
mobileMenu: PropTypes.bool
|
|
};
|
|
|
|
export default PagesMenu;
|