feat: Initial setup of theme.
This commit is contained in:
vikrant k
211
src/components/Navbars/DashboardNavbar/index.js
Normal file
211
src/components/Navbars/DashboardNavbar/index.js
Normal file
@@ -0,0 +1,211 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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 { useState, useEffect } from 'react';
|
||||
|
||||
// react-router components
|
||||
import { useLocation, Link } from 'react-router-dom';
|
||||
|
||||
// prop-types is a library for typechecking of props.
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @material-ui core components
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import Icon from '@mui/material/Icon';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
import MDInput from 'components/MDInput';
|
||||
import MDBadge from 'components/MDBadge';
|
||||
|
||||
// Material Dashboard 2 PRO React example components
|
||||
import Breadcrumbs from 'examples/Breadcrumbs';
|
||||
import NotificationItem from 'examples/Items/NotificationItem';
|
||||
|
||||
// Custom styles for DashboardNavbar
|
||||
import {
|
||||
navbar,
|
||||
navbarContainer,
|
||||
navbarRow,
|
||||
navbarIconButton,
|
||||
navbarDesktopMenu,
|
||||
navbarMobileMenu
|
||||
} from 'examples/Navbars/DashboardNavbar/styles';
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import {
|
||||
useMaterialUIController,
|
||||
setTransparentNavbar,
|
||||
setMiniSidenav,
|
||||
setOpenConfigurator
|
||||
} from 'context';
|
||||
|
||||
function DashboardNavbar({ absolute, light, isMini }) {
|
||||
const [navbarType, setNavbarType] = useState();
|
||||
const [controller, dispatch] = useMaterialUIController();
|
||||
const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
const route = useLocation().pathname.split('/').slice(1);
|
||||
|
||||
useEffect(() => {
|
||||
// Setting the navbar type
|
||||
if (fixedNavbar) {
|
||||
setNavbarType('sticky');
|
||||
} else {
|
||||
setNavbarType('static');
|
||||
}
|
||||
|
||||
// A function that sets the transparent state of the navbar.
|
||||
function handleTransparentNavbar() {
|
||||
setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
|
||||
}
|
||||
|
||||
/**
|
||||
The event listener that's calling the handleTransparentNavbar function when
|
||||
scrolling the window.
|
||||
*/
|
||||
window.addEventListener('scroll', handleTransparentNavbar);
|
||||
|
||||
// Call the handleTransparentNavbar function to set the state with the initial value.
|
||||
handleTransparentNavbar();
|
||||
|
||||
// Remove event listener on cleanup
|
||||
return () => window.removeEventListener('scroll', handleTransparentNavbar);
|
||||
}, [dispatch, fixedNavbar]);
|
||||
|
||||
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
|
||||
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
|
||||
const handleOpenMenu = (event) => setOpenMenu(event.currentTarget);
|
||||
const handleCloseMenu = () => setOpenMenu(false);
|
||||
|
||||
// Render the notifications menu
|
||||
const renderMenu = () => (
|
||||
<Menu
|
||||
anchorEl={openMenu}
|
||||
anchorReference={null}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left'
|
||||
}}
|
||||
open={Boolean(openMenu)}
|
||||
sx={{ mt: 2 }}
|
||||
onClose={handleCloseMenu}
|
||||
>
|
||||
<NotificationItem icon={<Icon>email</Icon>} title="Check new messages" />
|
||||
<NotificationItem icon={<Icon>podcasts</Icon>} title="Manage Podcast sessions" />
|
||||
<NotificationItem icon={<Icon>shopping_cart</Icon>} title="Payment successfully completed" />
|
||||
</Menu>
|
||||
);
|
||||
|
||||
// Styles for the navbar icons
|
||||
const iconsStyle = ({ palette: { dark, white, text }, functions: { rgba } }) => ({
|
||||
color: () => {
|
||||
let colorValue = light || darkMode ? white.main : dark.main;
|
||||
|
||||
if (transparentNavbar && !light) {
|
||||
colorValue = darkMode ? rgba(text.main, 0.6) : text.main;
|
||||
}
|
||||
|
||||
return colorValue;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position={absolute ? 'absolute' : navbarType}
|
||||
color="inherit"
|
||||
sx={(theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode })}
|
||||
>
|
||||
<Toolbar sx={(theme) => navbarContainer(theme)}>
|
||||
<MDBox color="inherit" mb={{ xs: 1, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
|
||||
<Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
|
||||
<IconButton disableRipple sx={navbarDesktopMenu} size="small" onClick={handleMiniSidenav}>
|
||||
<Icon fontSize="medium" sx={iconsStyle}>
|
||||
{miniSidenav ? 'menu_open' : 'menu'}
|
||||
</Icon>
|
||||
</IconButton>
|
||||
</MDBox>
|
||||
{isMini ? null : (
|
||||
<MDBox sx={(theme) => navbarRow(theme, { isMini })}>
|
||||
<MDBox pr={1}>
|
||||
<MDInput label="Search here" />
|
||||
</MDBox>
|
||||
<MDBox color={light ? 'white' : 'inherit'}>
|
||||
<Link to="/authentication/sign-in/basic">
|
||||
<IconButton disableRipple sx={navbarIconButton} size="small">
|
||||
<Icon sx={iconsStyle}>account_circle</Icon>
|
||||
</IconButton>
|
||||
</Link>
|
||||
<IconButton
|
||||
disableRipple
|
||||
size="small"
|
||||
color="inherit"
|
||||
sx={navbarMobileMenu}
|
||||
onClick={handleMiniSidenav}
|
||||
>
|
||||
<Icon sx={iconsStyle} fontSize="medium">
|
||||
{miniSidenav ? 'menu_open' : 'menu'}
|
||||
</Icon>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
disableRipple
|
||||
size="small"
|
||||
color="inherit"
|
||||
sx={navbarIconButton}
|
||||
onClick={handleConfiguratorOpen}
|
||||
>
|
||||
<Icon sx={iconsStyle}>settings</Icon>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
disableRipple
|
||||
size="small"
|
||||
color="inherit"
|
||||
sx={navbarIconButton}
|
||||
aria-controls="notification-menu"
|
||||
aria-haspopup="true"
|
||||
variant="contained"
|
||||
onClick={handleOpenMenu}
|
||||
>
|
||||
<MDBadge circular badgeContent={9} color="error" size="xs">
|
||||
<Icon sx={iconsStyle}>notifications</Icon>
|
||||
</MDBadge>
|
||||
</IconButton>
|
||||
{renderMenu()}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
)}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of DashboardNavbar
|
||||
DashboardNavbar.defaultProps = {
|
||||
absolute: false,
|
||||
light: false,
|
||||
isMini: false
|
||||
};
|
||||
|
||||
// Typechecking props for the DashboardNavbar
|
||||
DashboardNavbar.propTypes = {
|
||||
absolute: PropTypes.bool,
|
||||
light: PropTypes.bool,
|
||||
isMini: PropTypes.bool
|
||||
};
|
||||
|
||||
export default DashboardNavbar;
|
||||
150
src/components/Navbars/DashboardNavbar/styles.js
Normal file
150
src/components/Navbars/DashboardNavbar/styles.js
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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.
|
||||
*/
|
||||
function navbar(theme, ownerState) {
|
||||
const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme;
|
||||
const { transparentNavbar, absolute, light, darkMode } = ownerState;
|
||||
|
||||
const { dark, white, text, transparent, background } = palette;
|
||||
const { navbarBoxShadow } = boxShadows;
|
||||
const { rgba, pxToRem } = functions;
|
||||
const { borderRadius } = borders;
|
||||
|
||||
return {
|
||||
boxShadow: transparentNavbar || absolute ? 'none' : navbarBoxShadow,
|
||||
backdropFilter: transparentNavbar || absolute ? 'none' : `saturate(200%) blur(${pxToRem(30)})`,
|
||||
backgroundColor:
|
||||
transparentNavbar || absolute
|
||||
? `${transparent.main} !important`
|
||||
: rgba(darkMode ? background.default : white.main, 0.8),
|
||||
|
||||
color: () => {
|
||||
let color;
|
||||
|
||||
if (light) {
|
||||
color = white.main;
|
||||
} else if (transparentNavbar) {
|
||||
color = text.main;
|
||||
} else {
|
||||
color = dark.main;
|
||||
}
|
||||
|
||||
return color;
|
||||
},
|
||||
top: absolute ? 0 : pxToRem(12),
|
||||
minHeight: pxToRem(75),
|
||||
display: 'grid',
|
||||
alignItems: 'center',
|
||||
borderRadius: borderRadius.xl,
|
||||
paddingTop: pxToRem(8),
|
||||
paddingBottom: pxToRem(8),
|
||||
paddingRight: absolute ? pxToRem(8) : 0,
|
||||
paddingLeft: absolute ? pxToRem(16) : 0,
|
||||
|
||||
'& > *': {
|
||||
transition: transitions.create('all', {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard
|
||||
})
|
||||
},
|
||||
|
||||
'& .MuiToolbar-root': {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
|
||||
[breakpoints.up('sm')]: {
|
||||
minHeight: 'auto',
|
||||
padding: `${pxToRem(4)} ${pxToRem(16)}`
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const navbarContainer = ({ breakpoints }) => ({
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
pt: 0.5,
|
||||
pb: 0.5,
|
||||
|
||||
[breakpoints.up('md')]: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingTop: '0',
|
||||
paddingBottom: '0'
|
||||
}
|
||||
});
|
||||
|
||||
const navbarRow = ({ breakpoints }, { isMini }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
|
||||
[breakpoints.up('md')]: {
|
||||
justifyContent: isMini ? 'space-between' : 'stretch',
|
||||
width: isMini ? '100%' : 'max-content'
|
||||
},
|
||||
|
||||
[breakpoints.up('xl')]: {
|
||||
justifyContent: 'stretch !important',
|
||||
width: 'max-content !important'
|
||||
}
|
||||
});
|
||||
|
||||
const navbarIconButton = ({ typography: { size }, breakpoints }) => ({
|
||||
px: 1,
|
||||
|
||||
'& .material-icons, .material-icons-round': {
|
||||
fontSize: `${size.xl} !important`
|
||||
},
|
||||
|
||||
'& .MuiTypography-root': {
|
||||
display: 'none',
|
||||
|
||||
[breakpoints.up('sm')]: {
|
||||
display: 'inline-block',
|
||||
lineHeight: 1.2,
|
||||
ml: 0.5
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const navbarDesktopMenu = ({ breakpoints }) => ({
|
||||
display: 'none !important',
|
||||
cursor: 'pointer',
|
||||
|
||||
[breakpoints.up('xl')]: {
|
||||
display: 'inline-block !important'
|
||||
}
|
||||
});
|
||||
|
||||
const navbarMobileMenu = ({ breakpoints }) => ({
|
||||
display: 'inline-block',
|
||||
lineHeight: 0,
|
||||
|
||||
[breakpoints.up('xl')]: {
|
||||
display: 'none'
|
||||
}
|
||||
});
|
||||
|
||||
export {
|
||||
navbar,
|
||||
navbarContainer,
|
||||
navbarRow,
|
||||
navbarIconButton,
|
||||
navbarDesktopMenu,
|
||||
navbarMobileMenu
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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.
|
||||
*/
|
||||
|
||||
// prop-types is a library for typechecking of props
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui material components
|
||||
import Icon from '@mui/material/Icon';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
|
||||
function DefaultNavbarCategory({ icon, title }) {
|
||||
return (
|
||||
<MDBox width="100%" display="flex" alignItems="center" py={1}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
borderRadius="md"
|
||||
color="text"
|
||||
mr={1}
|
||||
fontSize="1rem"
|
||||
>
|
||||
{typeof icon === 'string' ? <Icon>{icon}</Icon> : icon}
|
||||
</MDBox>
|
||||
<MDTypography variant="button" fontWeight="bold">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Typechecking props for the DefaultNavbarCategory
|
||||
DefaultNavbarCategory.propTypes = {
|
||||
icon: PropTypes.node.isRequired,
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DefaultNavbarCategory;
|
||||
96
src/components/Navbars/DefaultNavbar/DefaultNavbarLink.js
Normal file
96
src/components/Navbars/DefaultNavbar/DefaultNavbarLink.js
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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.
|
||||
*/
|
||||
|
||||
// prop-types is a library for typechecking of props
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui material components
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import Icon from '@mui/material/Icon';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from 'context';
|
||||
|
||||
function DefaultNavbarLink({
|
||||
name,
|
||||
openHandler,
|
||||
closeHandler,
|
||||
children,
|
||||
collapseStatus,
|
||||
light,
|
||||
...rest
|
||||
}) {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<>
|
||||
<MDBox
|
||||
{...rest}
|
||||
mx={1}
|
||||
p={1}
|
||||
display="flex"
|
||||
alignItems="baseline"
|
||||
color={light ? 'white' : 'dark'}
|
||||
sx={{ cursor: 'pointer', userSelect: 'none' }}
|
||||
onMouseEnter={children ? undefined : openHandler}
|
||||
onMouseLeave={children ? undefined : closeHandler}
|
||||
>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
textTransform="capitalize"
|
||||
color={darkMode ? 'white' : 'inherit'}
|
||||
sx={{ fontWeight: '100%' }}
|
||||
>
|
||||
{name}
|
||||
</MDTypography>
|
||||
<MDTypography variant="body2" color={light ? 'white' : 'dark'}>
|
||||
<Icon sx={{ fontWeight: 'bold', verticalAlign: 'middle' }}>keyboard_arrow_down</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
{children && (
|
||||
<Collapse unmountOnExit in={Boolean(collapseStatus)} timeout="auto">
|
||||
{children}
|
||||
</Collapse>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of DefaultNavbarLink
|
||||
DefaultNavbarLink.defaultProps = {
|
||||
openHandler: false,
|
||||
closeHandler: false,
|
||||
children: false,
|
||||
collapseStatus: false,
|
||||
light: false
|
||||
};
|
||||
|
||||
// Typechecking props for the DefaultNavbarLink
|
||||
DefaultNavbarLink.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
openHandler: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
|
||||
closeHandler: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
|
||||
children: PropTypes.node,
|
||||
collapseStatus: PropTypes.bool,
|
||||
light: PropTypes.bool
|
||||
};
|
||||
|
||||
export default DefaultNavbarLink;
|
||||
87
src/components/Navbars/DefaultNavbar/DefaultNavbarMenu.js
Normal file
87
src/components/Navbars/DefaultNavbar/DefaultNavbarMenu.js
Normal file
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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 { useState } from 'react';
|
||||
|
||||
// prop-types is a library for typechecking of props.
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui material components
|
||||
import Popper from '@mui/material/Popper';
|
||||
import Grow from '@mui/material/Grow';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from 'context';
|
||||
|
||||
function DefaultNavbarMenu({ open, close, placement, children, style }) {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const [anchor, setAnchor] = useState(false);
|
||||
|
||||
const openMenu = () => setAnchor(open);
|
||||
const closeMenu = () => setAnchor(false);
|
||||
return (
|
||||
<Popper
|
||||
transition
|
||||
anchorEl={anchor || open}
|
||||
popperRef={null}
|
||||
open={Boolean(anchor) || Boolean(open)}
|
||||
placement={placement}
|
||||
style={{ zIndex: 10, ...style }}
|
||||
>
|
||||
{({ TransitionProps }) => (
|
||||
<Grow
|
||||
{...TransitionProps}
|
||||
sx={{
|
||||
transformOrigin: 'left top',
|
||||
background: ({ palette: { white, background } }) =>
|
||||
darkMode ? background.card : white.main
|
||||
}}
|
||||
>
|
||||
<MDBox
|
||||
shadow="lg"
|
||||
borderRadius="lg"
|
||||
p={1.5}
|
||||
onMouseEnter={openMenu}
|
||||
onMouseLeave={(close, closeMenu)}
|
||||
>
|
||||
{children}
|
||||
</MDBox>
|
||||
</Grow>
|
||||
)}
|
||||
</Popper>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of DefaultNavbarMenu
|
||||
DefaultNavbarMenu.defaultProps = {
|
||||
placement: 'bottom-start',
|
||||
style: {}
|
||||
};
|
||||
|
||||
// Typechecking props for the DefaultNavbarMenu
|
||||
DefaultNavbarMenu.propTypes = {
|
||||
open: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).isRequired,
|
||||
close: PropTypes.oneOfType([PropTypes.func, PropTypes.bool, PropTypes.object]).isRequired,
|
||||
placement: PropTypes.string,
|
||||
children: PropTypes.node.isRequired,
|
||||
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
|
||||
};
|
||||
|
||||
export default DefaultNavbarMenu;
|
||||
118
src/components/Navbars/DefaultNavbar/DefaultNavbarMobile.js
Normal file
118
src/components/Navbars/DefaultNavbar/DefaultNavbarMobile.js
Normal file
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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 { useState } from 'react';
|
||||
|
||||
// prop-types is a library for typechecking of props.
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui material components
|
||||
import Menu from '@mui/material/Menu';
|
||||
// import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
|
||||
// Material Dashboard 2 PRO React example components
|
||||
import DefaultNavbarLink from 'examples/Navbars/DefaultNavbar/DefaultNavbarLink';
|
||||
|
||||
// DefaultNavbar dropdown menus
|
||||
import PagesMenu from 'examples/Navbars/DefaultNavbar/Menus/PagesMenu';
|
||||
import AuthenticationMenu from 'examples/Navbars/DefaultNavbar/Menus/AuthenticationMenu';
|
||||
import ApplicationsMenu from 'examples/Navbars/DefaultNavbar/Menus/ApplicationsMenu';
|
||||
import EcommerceMenu from 'examples/Navbars/DefaultNavbar/Menus/EcommerceMenu';
|
||||
import DocsMenu from 'examples/Navbars/DefaultNavbar/Menus/DocsMenu';
|
||||
|
||||
function DefaultNavbarMobile({ routes, open, close }) {
|
||||
const { width } = open && open.getBoundingClientRect();
|
||||
const [openCollapse, setOpenCollapse] = useState(false);
|
||||
|
||||
const handleSepOpenCollapse = (name) =>
|
||||
openCollapse === name ? setOpenCollapse(false) : setOpenCollapse(name);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
anchorEl={open}
|
||||
open={Boolean(open)}
|
||||
MenuListProps={{ style: { width: `calc(${width}px - 4rem)` } }}
|
||||
onClose={close}
|
||||
>
|
||||
<MDBox px={0.5}>
|
||||
<DefaultNavbarLink
|
||||
name="pages"
|
||||
collapseStatus={openCollapse === 'pages'}
|
||||
onClick={() => handleSepOpenCollapse('pages')}
|
||||
>
|
||||
<MDBox maxHeight="16rem" overflow="auto">
|
||||
<PagesMenu mobileMenu routes={routes} />
|
||||
</MDBox>
|
||||
</DefaultNavbarLink>
|
||||
<DefaultNavbarLink
|
||||
name="authentication"
|
||||
collapseStatus={openCollapse === 'authentication'}
|
||||
onClick={() => handleSepOpenCollapse('authentication')}
|
||||
>
|
||||
<MDBox maxHeight="16rem" overflow="auto">
|
||||
<AuthenticationMenu mobileMenu routes={routes} />
|
||||
</MDBox>
|
||||
</DefaultNavbarLink>
|
||||
<DefaultNavbarLink
|
||||
name="applications"
|
||||
collapseStatus={openCollapse === 'applications'}
|
||||
onClick={() => handleSepOpenCollapse('applications')}
|
||||
>
|
||||
<MDBox maxHeight="16rem" overflow="auto">
|
||||
<ApplicationsMenu mobileMenu routes={routes} />
|
||||
</MDBox>
|
||||
</DefaultNavbarLink>
|
||||
<DefaultNavbarLink
|
||||
name="ecommerce"
|
||||
collapseStatus={openCollapse === 'ecommerce'}
|
||||
onClick={() => handleSepOpenCollapse('ecommerce')}
|
||||
>
|
||||
<MDBox maxHeight="16rem" overflow="auto">
|
||||
<EcommerceMenu mobileMenu routes={routes} />
|
||||
</MDBox>
|
||||
</DefaultNavbarLink>
|
||||
<DefaultNavbarLink
|
||||
name="docs"
|
||||
collapseStatus={openCollapse === 'docs'}
|
||||
onClick={() => handleSepOpenCollapse('docs')}
|
||||
>
|
||||
<MDBox maxHeight="16rem" overflow="auto">
|
||||
<DocsMenu mobileMenu routes={routes} />
|
||||
</MDBox>
|
||||
</DefaultNavbarLink>
|
||||
</MDBox>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
// Typechecking props for the DefaultNavbarMenu
|
||||
DefaultNavbarMobile.propTypes = {
|
||||
routes: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
open: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).isRequired,
|
||||
close: PropTypes.oneOfType([PropTypes.func, PropTypes.bool, PropTypes.object]).isRequired
|
||||
};
|
||||
|
||||
export default DefaultNavbarMobile;
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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.
|
||||
*/
|
||||
|
||||
// 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 MenuItem from '@mui/material/MenuItem';
|
||||
import Icon from '@mui/material/Icon';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
|
||||
// Material Dashboard 2 PRO React example components
|
||||
import DefaultNavbarMenu from 'examples/Navbars/DefaultNavbar/DefaultNavbarMenu';
|
||||
|
||||
function ApplicationsMenu({ routes, open, close, mobileMenu }) {
|
||||
const renderApplicationsMenuRoute = (routeName) =>
|
||||
routes.map(
|
||||
({ key, collapse }) =>
|
||||
key === routeName &&
|
||||
collapse.map(({ key: collapseKey, route, name, icon }) => (
|
||||
<MenuItem
|
||||
key={collapseKey}
|
||||
component={Link}
|
||||
to={route}
|
||||
onClick={mobileMenu ? undefined : close}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center" py={0.25} fontSize="1rem" color="text">
|
||||
{typeof icon === 'string' ? <Icon>{icon}</Icon> : icon}
|
||||
<MDTypography
|
||||
variant="button"
|
||||
color="text"
|
||||
fontWeight="regular"
|
||||
pl={2}
|
||||
lineHeight={0}
|
||||
>
|
||||
{name}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MenuItem>
|
||||
))
|
||||
);
|
||||
|
||||
return mobileMenu ? (
|
||||
<MDBox px={1.5}>{renderApplicationsMenuRoute('applications')}</MDBox>
|
||||
) : (
|
||||
<DefaultNavbarMenu open={open} close={close}>
|
||||
{renderApplicationsMenuRoute('applications')}
|
||||
</DefaultNavbarMenu>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of ApplicationsMenu
|
||||
ApplicationsMenu.defaultProps = {
|
||||
mobileMenu: false,
|
||||
open: false,
|
||||
close: false
|
||||
};
|
||||
|
||||
// Typechecking props for the ApplicationsMenu
|
||||
ApplicationsMenu.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 ApplicationsMenu;
|
||||
130
src/components/Navbars/DefaultNavbar/Menus/AuthenticationMenu.js
Normal file
130
src/components/Navbars/DefaultNavbar/Menus/AuthenticationMenu.js
Normal file
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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 { useState } 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 MenuItem from '@mui/material/MenuItem';
|
||||
import Icon from '@mui/material/Icon';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
|
||||
// Material Dashboard 2 PRO React example components
|
||||
import DefaultNavbarMenu from 'examples/Navbars/DefaultNavbar/DefaultNavbarMenu';
|
||||
|
||||
function AuthenticationMenu({ routes, open, close, mobileMenu }) {
|
||||
const renderAuthenticationMenuRoute = (routeName) =>
|
||||
routes.map(({ key, name, icon, collapse }) => {
|
||||
let template;
|
||||
|
||||
const [menu, setMenu] = useState(false);
|
||||
const openMenu = ({ currentTarget }) => setMenu(currentTarget);
|
||||
const closeMenu = () => setMenu(false);
|
||||
|
||||
if (key === routeName && !mobileMenu) {
|
||||
template = (
|
||||
<MenuItem key={key} onMouseEnter={openMenu} onMouseLeave={closeMenu}>
|
||||
<Icon sx={{ mr: 1 }}>{icon}</Icon>
|
||||
{name}
|
||||
<Icon sx={{ fontWeight: 'bold', ml: 'auto' }}>chevron_right</Icon>
|
||||
<DefaultNavbarMenu
|
||||
placement="right-start"
|
||||
open={menu}
|
||||
close={closeMenu}
|
||||
style={{ paddingLeft: '1.25rem' }}
|
||||
>
|
||||
{collapse.map(({ key: collapseKey, name: collapseName, route }) => (
|
||||
<MenuItem
|
||||
component={Link}
|
||||
to={route}
|
||||
key={collapseKey}
|
||||
onClick={mobileMenu ? undefined : close}
|
||||
>
|
||||
{collapseName}
|
||||
</MenuItem>
|
||||
))}
|
||||
</DefaultNavbarMenu>
|
||||
</MenuItem>
|
||||
);
|
||||
} else if (key === routeName && mobileMenu) {
|
||||
template = (
|
||||
<MDBox key={key} px={2} mt={0} mb={2}>
|
||||
<MDTypography gutterBottom variant="button" fontWeight="bold">
|
||||
<MDTypography component="span" variant="body2" color="text">
|
||||
<Icon sx={{ mr: 1, mb: -0.375 }}>{icon}</Icon>
|
||||
</MDTypography>
|
||||
{name}
|
||||
</MDTypography>
|
||||
{collapse.map(({ key: collapseKey, name: collapseName, route }) => (
|
||||
<MenuItem
|
||||
component={Link}
|
||||
to={route}
|
||||
key={collapseKey}
|
||||
onClick={mobileMenu ? undefined : close}
|
||||
>
|
||||
{collapseName}
|
||||
</MenuItem>
|
||||
))}
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
return template;
|
||||
});
|
||||
|
||||
const renderMenuContent = (
|
||||
<MDBox display="block">
|
||||
{renderAuthenticationMenuRoute('sign-in')}
|
||||
{renderAuthenticationMenuRoute('sign-up')}
|
||||
{renderAuthenticationMenuRoute('reset-password')}
|
||||
{renderAuthenticationMenuRoute('lock')}
|
||||
{renderAuthenticationMenuRoute('2-step-verification')}
|
||||
{renderAuthenticationMenuRoute('error')}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return mobileMenu ? (
|
||||
renderMenuContent
|
||||
) : (
|
||||
<DefaultNavbarMenu open={open} close={close}>
|
||||
{renderMenuContent}
|
||||
</DefaultNavbarMenu>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of AuthenticationMenu
|
||||
AuthenticationMenu.defaultProps = {
|
||||
mobileMenu: false,
|
||||
open: false,
|
||||
close: false
|
||||
};
|
||||
|
||||
// Typechecking props for the AuthenticationMenu
|
||||
AuthenticationMenu.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 AuthenticationMenu;
|
||||
88
src/components/Navbars/DefaultNavbar/Menus/DocsMenu.js
Normal file
88
src/components/Navbars/DefaultNavbar/Menus/DocsMenu.js
Normal file
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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.
|
||||
*/
|
||||
|
||||
// prop-types is a library for typechecking of props.
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui material components
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Icon from '@mui/material/Icon';
|
||||
import Link from '@mui/material/Link';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
|
||||
// Material Dashboard 2 PRO React example components
|
||||
import DefaultNavbarMenu from 'examples/Navbars/DefaultNavbar/DefaultNavbarMenu';
|
||||
|
||||
function DocsMenu({ routes, open, close, mobileMenu }) {
|
||||
const renderDocsMenuRoute = (routeName) =>
|
||||
routes.map(
|
||||
({ key, collapse }) =>
|
||||
key === routeName &&
|
||||
collapse.map(({ key: collapseKey, href, name, icon, description }) => (
|
||||
<MenuItem
|
||||
key={collapseKey}
|
||||
component={Link}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
onClick={mobileMenu ? undefined : close}
|
||||
>
|
||||
<MDBox display="flex" py={0.25} fontSize="1rem" color="text">
|
||||
{typeof icon === 'string' ? (
|
||||
<Icon color="inherit">{icon}</Icon>
|
||||
) : (
|
||||
<MDBox color="inherit">{icon}</MDBox>
|
||||
)}
|
||||
<MDBox pl={1} lineHeight={0}>
|
||||
<MDTypography variant="button" display="block" fontWeight="bold">
|
||||
{name}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MenuItem>
|
||||
))
|
||||
);
|
||||
|
||||
return mobileMenu ? (
|
||||
renderDocsMenuRoute('docs')
|
||||
) : (
|
||||
<DefaultNavbarMenu open={open} close={close}>
|
||||
{renderDocsMenuRoute('docs')}
|
||||
</DefaultNavbarMenu>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of DocsMenu
|
||||
DocsMenu.defaultProps = {
|
||||
mobileMenu: false,
|
||||
open: false,
|
||||
close: false
|
||||
};
|
||||
|
||||
// Typechecking props for the DocsMenu
|
||||
DocsMenu.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 DocsMenu;
|
||||
99
src/components/Navbars/DefaultNavbar/Menus/EcommerceMenu.js
Normal file
99
src/components/Navbars/DefaultNavbar/Menus/EcommerceMenu.js
Normal file
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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';
|
||||
|
||||
function EcommerceMenu({ routes, open, close, mobileMenu }) {
|
||||
const renderEcommerceMenuRoute = (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}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={5}>
|
||||
{renderEcommerceMenuRoute('orders')}
|
||||
<MDBox mt={2}>{renderEcommerceMenuRoute('general')}</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={7} sx={{ display: 'flex' }}>
|
||||
<MDBox display={{ xs: 'none', lg: 'block' }}>
|
||||
<Divider orientation="vertical" />
|
||||
</MDBox>
|
||||
<MDBox width="100%">{renderEcommerceMenuRoute('products')}</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return mobileMenu ? (
|
||||
renderMenuContent
|
||||
) : (
|
||||
<DefaultNavbarMenu open={open} close={close}>
|
||||
{renderMenuContent}
|
||||
</DefaultNavbarMenu>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of EcommerceMenu
|
||||
EcommerceMenu.defaultProps = {
|
||||
mobileMenu: false,
|
||||
open: false,
|
||||
close: false
|
||||
};
|
||||
|
||||
// Typechecking props for the EcommerceMenu
|
||||
EcommerceMenu.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 EcommerceMenu;
|
||||
125
src/components/Navbars/DefaultNavbar/Menus/PagesMenu.js
Normal file
125
src/components/Navbars/DefaultNavbar/Menus/PagesMenu.js
Normal file
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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;
|
||||
260
src/components/Navbars/DefaultNavbar/index.js
Normal file
260
src/components/Navbars/DefaultNavbar/index.js
Normal file
@@ -0,0 +1,260 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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 { useState, useEffect } from 'react';
|
||||
|
||||
// react-router components
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// prop-types is a library for typechecking of props.
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui material components
|
||||
import Container from '@mui/material/Container';
|
||||
import Icon from '@mui/material/Icon';
|
||||
|
||||
// Material Dashboard 2 PRO React components
|
||||
import MDBox from 'components/MDBox';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
import MDButton from 'components/MDButton';
|
||||
|
||||
// Material Dashboard 2 PRO React example components
|
||||
import DefaultNavbarLink from 'examples/Navbars/DefaultNavbar/DefaultNavbarLink';
|
||||
import DefaultNavbarMobile from 'examples/Navbars/DefaultNavbar/DefaultNavbarMobile';
|
||||
|
||||
// Material Dashboard 2 PRO React base styles
|
||||
import breakpoints from 'assets/theme/base/breakpoints';
|
||||
|
||||
// DefaultNavbar dropdown menus
|
||||
import PagesMenu from 'examples/Navbars/DefaultNavbar/Menus/PagesMenu';
|
||||
import AuthenticationMenu from 'examples/Navbars/DefaultNavbar/Menus/AuthenticationMenu';
|
||||
import EcommerceMenu from 'examples/Navbars/DefaultNavbar/Menus/EcommerceMenu';
|
||||
import ApplicationsMenu from 'examples/Navbars/DefaultNavbar/Menus/ApplicationsMenu';
|
||||
import DocsMenu from 'examples/Navbars/DefaultNavbar/Menus/DocsMenu';
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from 'context';
|
||||
|
||||
function DefaultNavbar({ routes, transparent, light, action }) {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const [pagesMenu, setPagesMenu] = useState(false);
|
||||
const [authenticationMenu, setAuthenticationMenu] = useState(false);
|
||||
const [ecommerceMenu, setEcommerceMenu] = useState(false);
|
||||
const [applicationsMenu, setApplicationsMenu] = useState(false);
|
||||
const [docsMenu, setDocsMenu] = useState(false);
|
||||
const [mobileNavbar, setMobileNavbar] = useState(false);
|
||||
const [mobileView, setMobileView] = useState(false);
|
||||
|
||||
const openPagesMenu = ({ currentTarget }) => setPagesMenu(currentTarget);
|
||||
const closePagesMenu = () => setPagesMenu(false);
|
||||
const openAuthenticationMenu = ({ currentTarget }) => setAuthenticationMenu(currentTarget);
|
||||
const closeAuthenticationMenu = () => setAuthenticationMenu(false);
|
||||
const openEcommerceMenu = ({ currentTarget }) => setEcommerceMenu(currentTarget);
|
||||
const closeEcommerceMenu = () => setEcommerceMenu(false);
|
||||
const openApplicationsMenu = ({ currentTarget }) => setApplicationsMenu(currentTarget);
|
||||
const closeApplicationsMenu = () => setApplicationsMenu(false);
|
||||
const openDocsMenu = ({ currentTarget }) => setDocsMenu(currentTarget);
|
||||
const closeDocsMenu = () => setDocsMenu(false);
|
||||
const openMobileNavbar = ({ currentTarget }) => setMobileNavbar(currentTarget.parentNode);
|
||||
const closeMobileNavbar = () => setMobileNavbar(false);
|
||||
|
||||
useEffect(() => {
|
||||
// A function that sets the display state for the DefaultNavbarMobile.
|
||||
function displayMobileNavbar() {
|
||||
if (window.innerWidth < breakpoints.values.lg) {
|
||||
setMobileView(true);
|
||||
setMobileNavbar(false);
|
||||
} else {
|
||||
setMobileView(false);
|
||||
setMobileNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
The event listener that's calling the displayMobileNavbar function when
|
||||
resizing the window.
|
||||
*/
|
||||
window.addEventListener('resize', displayMobileNavbar);
|
||||
|
||||
// Call the displayMobileNavbar function to set the state with the initial value.
|
||||
displayMobileNavbar();
|
||||
|
||||
// Remove event listener on cleanup
|
||||
return () => window.removeEventListener('resize', displayMobileNavbar);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<MDBox
|
||||
py={1}
|
||||
px={{ xs: 4, sm: transparent ? 2 : 3, lg: transparent ? 0 : 2 }}
|
||||
my={3}
|
||||
mx={3}
|
||||
width="calc(100% - 48px)"
|
||||
borderRadius="lg"
|
||||
shadow={transparent ? 'none' : 'md'}
|
||||
color={light ? 'white' : 'dark'}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
position="absolute"
|
||||
left={0}
|
||||
zIndex={3}
|
||||
sx={({
|
||||
palette: { transparent: transparentColor, white, background },
|
||||
functions: { rgba }
|
||||
}) => ({
|
||||
backgroundColor: transparent
|
||||
? transparentColor.main
|
||||
: rgba(darkMode ? background.sidenav : white.main, 0.8),
|
||||
backdropFilter: transparent ? 'none' : 'saturate(200%) blur(30px)'
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
component={Link}
|
||||
to="/"
|
||||
py={transparent ? 1.5 : 0.75}
|
||||
lineHeight={1}
|
||||
pl={{ xs: 0, lg: 1 }}
|
||||
>
|
||||
<MDTypography variant="button" fontWeight="bold" color={light ? 'white' : 'dark'}>
|
||||
Material Dashboard PRO
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox color="inherit" display={{ xs: 'none', lg: 'flex' }} m={0} p={0}>
|
||||
<DefaultNavbarLink
|
||||
name="pages"
|
||||
openHandler={openPagesMenu}
|
||||
closeHandler={closePagesMenu}
|
||||
light={light}
|
||||
/>
|
||||
<DefaultNavbarLink
|
||||
name="authentication"
|
||||
openHandler={openAuthenticationMenu}
|
||||
closeHandler={closeAuthenticationMenu}
|
||||
light={light}
|
||||
/>
|
||||
|
||||
<DefaultNavbarLink
|
||||
name="application"
|
||||
openHandler={openApplicationsMenu}
|
||||
closeHandler={closeApplicationsMenu}
|
||||
light={light}
|
||||
/>
|
||||
<DefaultNavbarLink
|
||||
name="ecommerce"
|
||||
openHandler={openEcommerceMenu}
|
||||
closeHandler={closeEcommerceMenu}
|
||||
light={light}
|
||||
/>
|
||||
<DefaultNavbarLink
|
||||
name="docs"
|
||||
openHandler={openDocsMenu}
|
||||
closeHandler={closeDocsMenu}
|
||||
light={light}
|
||||
/>
|
||||
</MDBox>
|
||||
{action &&
|
||||
(action.type === 'internal' ? (
|
||||
<MDBox display={{ xs: 'none', lg: 'inline-block' }}>
|
||||
<MDButton
|
||||
component={Link}
|
||||
to={action.route}
|
||||
variant="gradient"
|
||||
color={action.color ? action.color : 'info'}
|
||||
size="small"
|
||||
>
|
||||
{action.label}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
) : (
|
||||
<MDBox display={{ xs: 'none', lg: 'inline-block' }}>
|
||||
<MDButton
|
||||
component="a"
|
||||
href={action.route}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="gradient"
|
||||
color={action.color ? action.color : 'info'}
|
||||
size="small"
|
||||
sx={{ mt: -0.3 }}
|
||||
>
|
||||
{action.label}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
))}
|
||||
<MDBox
|
||||
display={{ xs: 'inline-block', lg: 'none' }}
|
||||
lineHeight={0}
|
||||
py={1.5}
|
||||
pl={1.5}
|
||||
color="inherit"
|
||||
sx={{ cursor: 'pointer' }}
|
||||
onClick={openMobileNavbar}
|
||||
>
|
||||
<Icon fontSize="default">{mobileNavbar ? 'close' : 'menu'}</Icon>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<PagesMenu routes={routes} open={pagesMenu} close={closePagesMenu} />
|
||||
<AuthenticationMenu
|
||||
routes={routes}
|
||||
open={authenticationMenu}
|
||||
close={closeAuthenticationMenu}
|
||||
/>
|
||||
<EcommerceMenu routes={routes} open={ecommerceMenu} close={closeEcommerceMenu} />
|
||||
<ApplicationsMenu routes={routes} open={applicationsMenu} close={closeApplicationsMenu} />
|
||||
<DocsMenu routes={routes} open={docsMenu} close={closeDocsMenu} />
|
||||
{mobileView && (
|
||||
<DefaultNavbarMobile routes={routes} open={mobileNavbar} close={closeMobileNavbar} />
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of DefaultNavbar
|
||||
DefaultNavbar.defaultProps = {
|
||||
transparent: false,
|
||||
light: false,
|
||||
action: false
|
||||
};
|
||||
|
||||
// Typechecking props for the DefaultNavbar
|
||||
DefaultNavbar.propTypes = {
|
||||
routes: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
transparent: PropTypes.bool,
|
||||
light: PropTypes.bool,
|
||||
action: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.shape({
|
||||
type: PropTypes.oneOf(['external', 'internal']).isRequired,
|
||||
route: PropTypes.string.isRequired,
|
||||
color: PropTypes.oneOf([
|
||||
'primary',
|
||||
'secondary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error',
|
||||
'dark',
|
||||
'light'
|
||||
]),
|
||||
label: PropTypes.string.isRequired
|
||||
})
|
||||
])
|
||||
};
|
||||
|
||||
export default DefaultNavbar;
|
||||
Reference in New Issue
Block a user