feat: Initial setup of theme.

src/components/Breadcrumbs/index.js

@@ -0,0 +1,104 @@
+/**
+=========================================================
+* 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.
+*/
+
+// react-router-dom 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 { Breadcrumbs as MuiBreadcrumbs } from '@mui/material';
+import Icon from '@mui/material/Icon';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+import MDTypography from 'components/MDTypography';
+
+function Breadcrumbs({ icon, title, route, light }) {
+  const routes = route.slice(0, -1);
+
+  return (
+    <MDBox mr={{ xs: 0, xl: 8 }}>
+      <MuiBreadcrumbs
+        sx={{
+          '& .MuiBreadcrumbs-separator': {
+            color: ({ palette: { white, grey } }) => (light ? white.main : grey[600])
+          }
+        }}
+      >
+        <Link to="/">
+          <MDTypography
+            component="span"
+            variant="body2"
+            color={light ? 'white' : 'dark'}
+            opacity={light ? 0.8 : 0.5}
+            sx={{ lineHeight: 0 }}
+          >
+            <Icon>{icon}</Icon>
+          </MDTypography>
+        </Link>
+        {routes.map((el) => (
+          <Link to={`/${el}`} key={el}>
+            <MDTypography
+              component="span"
+              variant="button"
+              fontWeight="regular"
+              textTransform="capitalize"
+              color={light ? 'white' : 'dark'}
+              opacity={light ? 0.8 : 0.5}
+              sx={{ lineHeight: 0 }}
+            >
+              {el}
+            </MDTypography>
+          </Link>
+        ))}
+        <MDTypography
+          variant="button"
+          fontWeight="regular"
+          textTransform="capitalize"
+          color={light ? 'white' : 'dark'}
+          sx={{ lineHeight: 0 }}
+        >
+          {title.replace('-', ' ')}
+        </MDTypography>
+      </MuiBreadcrumbs>
+      <MDTypography
+        noWrap
+        fontWeight="bold"
+        textTransform="capitalize"
+        variant="h6"
+        color={light ? 'white' : 'dark'}
+      >
+        {title.replace('-', ' ')}
+      </MDTypography>
+    </MDBox>
+  );
+}
+
+// Setting default values for the props of Breadcrumbs
+Breadcrumbs.defaultProps = {
+  light: false
+};
+
+// Typechecking props for the Breadcrumbs
+Breadcrumbs.propTypes = {
+  icon: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
+  light: PropTypes.bool
+};
+
+export default Breadcrumbs;

src/components/Configurator/ConfiguratorRoot.js

@@ -0,0 +1,60 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Drawer from '@mui/material/Drawer';
+import { styled } from '@mui/material/styles';
+
+export default styled(Drawer)(({ theme, ownerState }) => {
+  const { boxShadows, functions, transitions } = theme;
+  const { openConfigurator } = ownerState;
+
+  const configuratorWidth = 360;
+  const { lg } = boxShadows;
+  const { pxToRem } = functions;
+
+  // drawer styles when openConfigurator={true}
+  const drawerOpenStyles = () => ({
+    width: configuratorWidth,
+    left: 'initial',
+    right: 0,
+    transition: transitions.create('right', {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.short
+    })
+  });
+
+  // drawer styles when openConfigurator={false}
+  const drawerCloseStyles = () => ({
+    left: 'initial',
+    right: pxToRem(-350),
+    transition: transitions.create('all', {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.short
+    })
+  });
+
+  return {
+    '& .MuiDrawer-paper': {
+      height: '100vh',
+      margin: 0,
+      padding: `0 ${pxToRem(10)}`,
+      borderRadius: 0,
+      boxShadow: lg,
+      overflowY: 'auto',
+      ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles())
+    }
+  };
+});

src/components/Configurator/index.js

@@ -0,0 +1,369 @@
+/**
+=========================================================
+* 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-github-btn
+import GitHubButton from 'react-github-btn';
+
+// @mui material components
+import Divider from '@mui/material/Divider';
+import Switch from '@mui/material/Switch';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import Icon from '@mui/material/Icon';
+
+// @mui icons
+import TwitterIcon from '@mui/icons-material/Twitter';
+import FacebookIcon from '@mui/icons-material/Facebook';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+import MDTypography from 'components/MDTypography';
+import MDButton from 'components/MDButton';
+
+// Custom styles for the Configurator
+import ConfiguratorRoot from 'components/Configurator/ConfiguratorRoot';
+
+// Material Dashboard 2 PRO React context
+import {
+  useMaterialUIController,
+  setOpenConfigurator,
+  setTransparentSidenav,
+  setWhiteSidenav,
+  setMiniSidenav,
+  setFixedNavbar,
+  setSidenavColor,
+  setDarkMode
+} from 'context';
+
+function Configurator() {
+  const [controller, dispatch] = useMaterialUIController();
+  const {
+    openConfigurator,
+    miniSidenav,
+    fixedNavbar,
+    sidenavColor,
+    transparentSidenav,
+    whiteSidenav,
+    darkMode
+  } = controller;
+  const [disabled, setDisabled] = useState(false);
+  const sidenavColors = ['primary', 'dark', 'info', 'success', 'warning', 'error'];
+
+  // Use the useEffect hook to change the button state for the sidenav type based on window size.
+  useEffect(() => {
+    // A function that sets the disabled state of the buttons for the sidenav type.
+    function handleDisabled() {
+      return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true);
+    }
+
+    // The event listener that's calling the handleDisabled function when resizing the window.
+    window.addEventListener('resize', handleDisabled);
+
+    // Call the handleDisabled function to set the state with the initial value.
+    handleDisabled();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleDisabled);
+  }, []);
+
+  const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false);
+  const handleTransparentSidenav = () => {
+    setTransparentSidenav(dispatch, true);
+    setWhiteSidenav(dispatch, false);
+  };
+  const handleWhiteSidenav = () => {
+    setWhiteSidenav(dispatch, true);
+    setTransparentSidenav(dispatch, false);
+  };
+  const handleDarkSidenav = () => {
+    setWhiteSidenav(dispatch, false);
+    setTransparentSidenav(dispatch, false);
+  };
+  const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
+  const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar);
+  const handleDarkMode = () => setDarkMode(dispatch, !darkMode);
+
+  // sidenav type buttons styles
+  const sidenavTypeButtonsStyles = ({
+    functions: { pxToRem },
+    palette: { white, dark, background },
+    borders: { borderWidth }
+  }) => ({
+    height: pxToRem(39),
+    background: darkMode ? background.sidenav : white.main,
+    color: darkMode ? white.main : dark.main,
+    border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
+
+    '&:hover, &:focus, &:focus:not(:hover)': {
+      background: darkMode ? background.sidenav : white.main,
+      color: darkMode ? white.main : dark.main,
+      border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`
+    }
+  });
+
+  // sidenav type active button styles
+  const sidenavTypeActiveButtonStyles = ({
+    functions: { pxToRem, linearGradient },
+    palette: { white, gradients, background }
+  }) => ({
+    height: pxToRem(39),
+    background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
+    color: darkMode ? background.sidenav : white.main,
+
+    '&:hover, &:focus, &:focus:not(:hover)': {
+      background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
+      color: darkMode ? background.sidenav : white.main
+    }
+  });
+
+  return (
+    <ConfiguratorRoot variant="permanent" ownerState={{ openConfigurator }}>
+      <MDBox
+        display="flex"
+        justifyContent="space-between"
+        alignItems="baseline"
+        pt={4}
+        pb={0.5}
+        px={3}
+      >
+        <MDBox>
+          <MDTypography variant="h5">Material UI Configurator</MDTypography>
+          <MDTypography variant="body2" color="text">
+            See our dashboard options.
+          </MDTypography>
+        </MDBox>
+
+        <Icon
+          sx={({ typography: { size }, palette: { dark, white } }) => ({
+            fontSize: `${size.lg} !important`,
+            color: darkMode ? white.main : dark.main,
+            stroke: 'currentColor',
+            strokeWidth: '2px',
+            cursor: 'pointer',
+            transform: 'translateY(5px)'
+          })}
+          onClick={handleCloseConfigurator}
+        >
+          close
+        </Icon>
+      </MDBox>
+
+      <Divider />
+
+      <MDBox pt={0.5} pb={3} px={3}>
+        <MDBox>
+          <MDTypography variant="h6">Sidenav Colors</MDTypography>
+
+          <MDBox mb={0.5}>
+            {sidenavColors.map((color) => (
+              <IconButton
+                key={color}
+                sx={({
+                  borders: { borderWidth },
+                  palette: { white, dark, background },
+                  transitions
+                }) => ({
+                  width: '24px',
+                  height: '24px',
+                  padding: 0,
+                  border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`,
+                  borderColor: () => {
+                    let borderColorValue = sidenavColor === color && dark.main;
+
+                    if (darkMode && sidenavColor === color) {
+                      borderColorValue = white.main;
+                    }
+
+                    return borderColorValue;
+                  },
+                  transition: transitions.create('border-color', {
+                    easing: transitions.easing.sharp,
+                    duration: transitions.duration.shorter
+                  }),
+                  backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) =>
+                    linearGradient(gradients[color].main, gradients[color].state),
+
+                  '&:not(:last-child)': {
+                    mr: 1
+                  },
+
+                  '&:hover, &:focus, &:active': {
+                    borderColor: darkMode ? white.main : dark.main
+                  }
+                })}
+                onClick={() => setSidenavColor(dispatch, color)}
+              />
+            ))}
+          </MDBox>
+        </MDBox>
+
+        <MDBox mt={3} lineHeight={1}>
+          <MDTypography variant="h6">Sidenav Type</MDTypography>
+          <MDTypography variant="button" color="text">
+            Choose between different sidenav types.
+          </MDTypography>
+
+          <MDBox
+            sx={{
+              display: 'flex',
+              mt: 2,
+              mr: 1
+            }}
+          >
+            <MDButton
+              fullWidth
+              color="dark"
+              variant="gradient"
+              disabled={disabled}
+              sx={
+                !transparentSidenav && !whiteSidenav
+                  ? sidenavTypeActiveButtonStyles
+                  : sidenavTypeButtonsStyles
+              }
+              onClick={handleDarkSidenav}
+            >
+              Dark
+            </MDButton>
+            <MDBox sx={{ mx: 1, width: '8rem', minWidth: '8rem' }}>
+              <MDButton
+                fullWidth
+                color="dark"
+                variant="gradient"
+                disabled={disabled}
+                sx={
+                  transparentSidenav && !whiteSidenav
+                    ? sidenavTypeActiveButtonStyles
+                    : sidenavTypeButtonsStyles
+                }
+                onClick={handleTransparentSidenav}
+              >
+                Transparent
+              </MDButton>
+            </MDBox>
+            <MDButton
+              fullWidth
+              color="dark"
+              variant="gradient"
+              disabled={disabled}
+              sx={
+                whiteSidenav && !transparentSidenav
+                  ? sidenavTypeActiveButtonStyles
+                  : sidenavTypeButtonsStyles
+              }
+              onClick={handleWhiteSidenav}
+            >
+              White
+            </MDButton>
+          </MDBox>
+        </MDBox>
+        <MDBox
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mt={3}
+          lineHeight={1}
+        >
+          <MDTypography variant="h6">Navbar Fixed</MDTypography>
+
+          <Switch checked={fixedNavbar} onChange={handleFixedNavbar} />
+        </MDBox>
+        <Divider />
+        <MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
+          <MDTypography variant="h6">Sidenav Mini</MDTypography>
+
+          <Switch checked={miniSidenav} onChange={handleMiniSidenav} />
+        </MDBox>
+        <Divider />
+        <MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
+          <MDTypography variant="h6">Light / Dark</MDTypography>
+
+          <Switch checked={darkMode} onChange={handleDarkMode} />
+        </MDBox>
+        <Divider />
+        <MDBox mt={3} mb={2}>
+          <MDBox mb={2}>
+            <MDButton
+              fullWidth
+              component={Link}
+              href="https://www.creative-tim.com/product/material-dashboard-pro-react"
+              target="_blank"
+              rel="noreferrer"
+              color="info"
+              variant="contained"
+            >
+              buy now
+            </MDButton>
+          </MDBox>
+          <MDButton
+            fullWidth
+            component={Link}
+            href="https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/"
+            target="_blank"
+            rel="noreferrer"
+            color={darkMode ? 'light' : 'dark'}
+            variant="outlined"
+          >
+            view documentation
+          </MDButton>
+        </MDBox>
+        <MDBox display="flex" justifyContent="center">
+          <GitHubButton
+            href="https://github.com/creativetimofficial/ct-material-dashboard-pro-react"
+            data-icon="octicon-star"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star creativetimofficial/ct-material-dashboard-pro-react on GitHub"
+          >
+            Star
+          </GitHubButton>
+        </MDBox>
+        <MDBox mt={2} textAlign="center">
+          <MDBox mb={0.5}>
+            <MDTypography variant="h6">Thank you for sharing!</MDTypography>
+          </MDBox>
+
+          <MDBox display="flex" justifyContent="center">
+            <MDBox mr={1.5}>
+              <MDButton
+                component={Link}
+                href="//twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20PRO%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%20%mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-pro-react"
+                target="_blank"
+                rel="noreferrer"
+                color="dark"
+              >
+                <TwitterIcon />
+                &nbsp; Tweet
+              </MDButton>
+            </MDBox>
+            <MDButton
+              component={Link}
+              href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-pro-react"
+              target="_blank"
+              rel="noreferrer"
+              color="dark"
+            >
+              <FacebookIcon />
+              &nbsp; Share
+            </MDButton>
+          </MDBox>
+        </MDBox>
+      </MDBox>
+    </ConfiguratorRoot>
+  );
+}
+
+export default Configurator;

src/components/DashboardNavbar/index.js

@@ -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 'components/Breadcrumbs';
+import NotificationItem from 'components/NotificationItem';
+
+// Custom styles for DashboardNavbar
+import {
+  navbar,
+  navbarContainer,
+  navbarRow,
+  navbarIconButton,
+  navbarDesktopMenu,
+  navbarMobileMenu
+} from 'components/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;

src/components/DashboardNavbar/styles.js

@@ -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
+};

src/components/DefaultNavbar/DefaultNavbarCategory.js

@@ -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;

src/components/DefaultNavbar/DefaultNavbarLink.js

@@ -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;

src/components/DefaultNavbar/DefaultNavbarMenu.js

@@ -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;

src/components/DefaultNavbar/DefaultNavbarMobile.js

@@ -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;

src/components/DefaultNavbar/Menus/ApplicationsMenu.js

@@ -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;

src/components/DefaultNavbar/Menus/AuthenticationMenu.js

@@ -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}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <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;

src/components/DefaultNavbar/Menus/DocsMenu.js

@@ -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;

src/components/DefaultNavbar/Menus/EcommerceMenu.js

@@ -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;

src/components/DefaultNavbar/Menus/PagesMenu.js

@@ -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;

src/components/DefaultNavbar/index.js

@@ -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;

src/components/Footer/index.js

@@ -0,0 +1,117 @@
+/**
+=========================================================
+* 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 Link from '@mui/material/Link';
+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 base styles
+import typography from 'assets/theme/base/typography';
+
+function Footer({ company, links }) {
+  const { href, name } = company;
+  const { size } = typography;
+
+  const renderLinks = () =>
+    links.map((link) => (
+      <MDBox key={link.name} component="li" px={2} lineHeight={1}>
+        <Link href={link.href} target="_blank">
+          <MDTypography variant="button" fontWeight="regular" color="text">
+            {link.name}
+          </MDTypography>
+        </Link>
+      </MDBox>
+    ));
+
+  return (
+    <MDBox
+      width="100%"
+      display="flex"
+      flexDirection={{ xs: 'column', lg: 'row' }}
+      justifyContent="space-between"
+      alignItems="center"
+      px={1.5}
+    >
+      <MDBox
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        flexWrap="wrap"
+        color="text"
+        fontSize={size.sm}
+        px={1.5}
+      >
+        &copy; {new Date().getFullYear()}, made with
+        <MDBox fontSize={size.md} color="text" mb={-0.5} mx={0.25}>
+          <Icon color="inherit" fontSize="inherit">
+            favorite
+          </Icon>
+        </MDBox>
+        by
+        <Link href={href} target="_blank">
+          <MDTypography variant="button" fontWeight="medium">
+            &nbsp;{name}&nbsp;
+          </MDTypography>
+        </Link>
+        for a better web.
+      </MDBox>
+      <MDBox
+        component="ul"
+        sx={({ breakpoints }) => ({
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          justifyContent: 'center',
+          listStyle: 'none',
+          mt: 3,
+          mb: 0,
+          p: 0,
+
+          [breakpoints.up('lg')]: {
+            mt: 0
+          }
+        })}
+      >
+        {renderLinks()}
+      </MDBox>
+    </MDBox>
+  );
+}
+
+// Setting default values for the props of Footer
+Footer.defaultProps = {
+  company: { href: 'https://www.creative-tim.com/', name: 'Plaidware Solutions' },
+  links: [
+    { href: 'https://www.creative-tim.com/', name: 'Creative Tim' },
+    { href: 'https://www.creative-tim.com/presentation', name: 'About Us' },
+    { href: 'https://www.creative-tim.com/blog', name: 'Blog' },
+    { href: 'https://www.creative-tim.com/license', name: 'License' }
+  ]
+};
+
+// Typechecking props for the Footer
+Footer.propTypes = {
+  company: PropTypes.objectOf(PropTypes.string),
+  links: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default Footer;

src/components/MDAlert/MDAlertCloseIcon.js

@@ -0,0 +1,35 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import { styled } from '@mui/material/styles';
+
+export default styled('span')(({ theme }) => {
+  const { palette, typography, functions } = theme;
+
+  const { white } = palette;
+  const { size, fontWeightMedium } = typography;
+  const { pxToRem } = functions;
+
+  return {
+    color: white.main,
+    fontSize: size.xl,
+    padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`,
+    marginLeft: pxToRem(40),
+    fontWeight: fontWeightMedium,
+    cursor: 'pointer',
+    lineHeight: 0
+  };
+});

src/components/MDAlert/MDAlertRoot.js

@@ -0,0 +1,48 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+export default styled(Box)(({ theme, ownerState }) => {
+  const { palette, typography, borders, functions } = theme;
+  const { color } = ownerState;
+
+  const { white, gradients } = palette;
+  const { fontSizeRegular, fontWeightMedium } = typography;
+  const { borderRadius } = borders;
+  const { pxToRem, linearGradient } = functions;
+
+  // backgroundImage value
+  const backgroundImageValue = gradients[color]
+    ? linearGradient(gradients[color].main, gradients[color].state)
+    : linearGradient(gradients.info.main, gradients.info.state);
+
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: pxToRem(60),
+    backgroundImage: backgroundImageValue,
+    color: white.main,
+    position: 'relative',
+    padding: pxToRem(16),
+    marginBottom: pxToRem(16),
+    borderRadius: borderRadius.md,
+    fontSize: fontSizeRegular,
+    fontWeight: fontWeightMedium
+  };
+});

src/components/MDAlert/index.js

@@ -0,0 +1,86 @@
+/**
+=========================================================
+* 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 Fade from '@mui/material/Fade';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+
+// Custom styles for the MDAlert
+import MDAlertRoot from 'components/MDAlert/MDAlertRoot';
+import MDAlertCloseIcon from 'components/MDAlert/MDAlertCloseIcon';
+
+function MDAlert({ color, dismissible, children, ...rest }) {
+  const [alertStatus, setAlertStatus] = useState('mount');
+
+  const handleAlertStatus = () => setAlertStatus('fadeOut');
+
+  // The base template for the alert
+  const alertTemplate = (mount = true) => (
+    <Fade in={mount} timeout={300}>
+      <MDAlertRoot ownerState={{ color }} {...rest}>
+        <MDBox display="flex" alignItems="center" color="white">
+          {children}
+        </MDBox>
+        {dismissible ? (
+          <MDAlertCloseIcon onClick={mount ? handleAlertStatus : null}>&times;</MDAlertCloseIcon>
+        ) : null}
+      </MDAlertRoot>
+    </Fade>
+  );
+
+  switch (true) {
+    case alertStatus === 'mount':
+      return alertTemplate();
+    case alertStatus === 'fadeOut':
+      setTimeout(() => setAlertStatus('unmount'), 400);
+      return alertTemplate(false);
+    default:
+      alertTemplate();
+      break;
+  }
+
+  return null;
+}
+
+// Setting default values for the props of MDAlert
+MDAlert.defaultProps = {
+  color: 'info',
+  dismissible: false
+};
+
+// Typechecking props of the MDAlert
+MDAlert.propTypes = {
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  dismissible: PropTypes.bool,
+  children: PropTypes.node.isRequired
+};
+
+export default MDAlert;

src/components/MDAvatar/MDAvatarRoot.js

@@ -0,0 +1,89 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Avatar from '@mui/material/Avatar';
+import { styled } from '@mui/material/styles';
+
+export default styled(Avatar)(({ theme, ownerState }) => {
+  const { palette, functions, typography, boxShadows } = theme;
+  const { shadow, bgColor, size } = ownerState;
+
+  const { gradients, transparent, white } = palette;
+  const { pxToRem, linearGradient } = functions;
+  const { size: fontSize, fontWeightRegular } = typography;
+
+  // backgroundImage value
+  const backgroundValue =
+    bgColor === 'transparent'
+      ? transparent.main
+      : linearGradient(gradients[bgColor].main, gradients[bgColor].state);
+
+  // size value
+  let sizeValue;
+
+  switch (size) {
+    case 'xs':
+      sizeValue = {
+        width: pxToRem(24),
+        height: pxToRem(24),
+        fontSize: fontSize.xs
+      };
+      break;
+    case 'sm':
+      sizeValue = {
+        width: pxToRem(36),
+        height: pxToRem(36),
+        fontSize: fontSize.sm
+      };
+      break;
+    case 'lg':
+      sizeValue = {
+        width: pxToRem(58),
+        height: pxToRem(58),
+        fontSize: fontSize.sm
+      };
+      break;
+    case 'xl':
+      sizeValue = {
+        width: pxToRem(74),
+        height: pxToRem(74),
+        fontSize: fontSize.md
+      };
+      break;
+    case 'xxl':
+      sizeValue = {
+        width: pxToRem(110),
+        height: pxToRem(110),
+        fontSize: fontSize.md
+      };
+      break;
+    default: {
+      sizeValue = {
+        width: pxToRem(48),
+        height: pxToRem(48),
+        fontSize: fontSize.md
+      };
+    }
+  }
+
+  return {
+    background: backgroundValue,
+    color: white.main,
+    fontWeight: fontWeightRegular,
+    boxShadow: boxShadows[shadow],
+    ...sizeValue
+  };
+});

src/components/MDAvatar/index.js

@@ -0,0 +1,52 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for MDAvatar
+import MDAvatarRoot from 'components/MDAvatar/MDAvatarRoot';
+
+const MDAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (
+  <MDAvatarRoot ref={ref} ownerState={{ shadow, bgColor, size }} {...rest} />
+));
+
+// Setting default values for the props of MDAvatar
+MDAvatar.defaultProps = {
+  bgColor: 'transparent',
+  size: 'md',
+  shadow: 'none'
+};
+
+// Typechecking props for the MDAvatar
+MDAvatar.propTypes = {
+  bgColor: PropTypes.oneOf([
+    'transparent',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
+  shadow: PropTypes.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'inset'])
+};
+
+export default MDAvatar;

src/components/MDBadge/MDBadgeRoot.js

@@ -0,0 +1,134 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Badge from '@mui/material/Badge';
+import { styled } from '@mui/material/styles';
+
+export default styled(Badge)(({ theme, ownerState }) => {
+  const { palette, typography, borders, functions } = theme;
+  const { color, circular, border, size, indicator, variant, container, children } = ownerState;
+
+  const { white, dark, gradients, badgeColors } = palette;
+  const { size: fontSize, fontWeightBold } = typography;
+  const { borderRadius, borderWidth } = borders;
+  const { pxToRem, linearGradient } = functions;
+
+  // padding values
+  const paddings = {
+    xs: '0.45em 0.775em',
+    sm: '0.55em 0.9em',
+    md: '0.65em 1em',
+    lg: '0.85em 1.375em'
+  };
+
+  // fontSize value
+  const fontSizeValue = size === 'xs' ? fontSize.xxs : fontSize.xs;
+
+  // border value
+  const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : 'none';
+
+  // borderRadius value
+  const borderRadiusValue = circular ? borderRadius.section : borderRadius.md;
+
+  // styles for the badge with indicator={true}
+  const indicatorStyles = (sizeProp) => {
+    let widthValue = pxToRem(20);
+    let heightValue = pxToRem(20);
+
+    if (sizeProp === 'medium') {
+      widthValue = pxToRem(24);
+      heightValue = pxToRem(24);
+    } else if (sizeProp === 'large') {
+      widthValue = pxToRem(32);
+      heightValue = pxToRem(32);
+    }
+
+    return {
+      width: widthValue,
+      height: heightValue,
+      display: 'grid',
+      placeItems: 'center',
+      textAlign: 'center',
+      borderRadius: '50%',
+      padding: 0,
+      border: borderValue
+    };
+  };
+
+  // styles for the badge with variant="gradient"
+  const gradientStyles = (colorProp) => {
+    const backgroundValue = gradients[colorProp]
+      ? linearGradient(gradients[colorProp].main, gradients[colorProp].state)
+      : linearGradient(gradients.info.main, gradients.info.state);
+    const colorValue = colorProp === 'light' ? dark.main : white.main;
+
+    return {
+      background: backgroundValue,
+      color: colorValue
+    };
+  };
+
+  // styles for the badge with variant="contained"
+  const containedStyles = (colorProp) => {
+    const backgroundValue = badgeColors[colorProp]
+      ? badgeColors[colorProp].background
+      : badgeColors.info.background;
+    let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text;
+
+    if (colorProp === 'light') {
+      colorValue = dark.main;
+    }
+    return {
+      background: backgroundValue,
+      color: colorValue
+    };
+  };
+
+  // styles for the badge with no children and container={false}
+  const standAloneStyles = () => ({
+    position: 'static',
+    marginLeft: pxToRem(8),
+    transform: 'none',
+    fontSize: pxToRem(9)
+  });
+
+  // styles for the badge with container={true}
+  const containerStyles = () => ({
+    position: 'relative',
+    transform: 'none'
+  });
+
+  return {
+    '& .MuiBadge-badge': {
+      height: 'auto',
+      padding: paddings[size] || paddings.xs,
+      fontSize: fontSizeValue,
+      fontWeight: fontWeightBold,
+      textTransform: 'uppercase',
+      lineHeight: 1,
+      textAlign: 'center',
+      whiteSpace: 'nowrap',
+      verticalAlign: 'baseline',
+      border: borderValue,
+      borderRadius: borderRadiusValue,
+      ...(indicator && indicatorStyles(size)),
+      ...(variant === 'gradient' && gradientStyles(color)),
+      ...(variant === 'contained' && containedStyles(color)),
+      ...(!children && !container && standAloneStyles(color)),
+      ...(container && containerStyles(color))
+    }
+  };
+});

src/components/MDBadge/index.js

@@ -0,0 +1,70 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for the MDBadge
+import MDBadgeRoot from 'components/MDBadge/MDBadgeRoot';
+
+const MDBadge = forwardRef(
+  ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => (
+    <MDBadgeRoot
+      {...rest}
+      ownerState={{ color, variant, size, circular, indicator, border, container, children }}
+      ref={ref}
+      color="default"
+    >
+      {children}
+    </MDBadgeRoot>
+  )
+);
+
+// Setting default values for the props of MDBadge
+MDBadge.defaultProps = {
+  color: 'info',
+  variant: 'gradient',
+  size: 'sm',
+  circular: false,
+  indicator: false,
+  border: false,
+  children: false,
+  container: false
+};
+
+// Typechecking props of the MDBadge
+MDBadge.propTypes = {
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  variant: PropTypes.oneOf(['gradient', 'contained']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  circular: PropTypes.bool,
+  indicator: PropTypes.bool,
+  border: PropTypes.bool,
+  children: PropTypes.node,
+  container: PropTypes.bool
+};
+
+export default MDBadge;

src/components/MDBadgeDot/index.js

@@ -0,0 +1,114 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+import MDTypography from 'components/MDTypography';
+
+const MDBadgeDot = forwardRef(({ variant, color, size, badgeContent, font, ...rest }, ref) => {
+  let finalSize;
+  let fontSize;
+  let padding;
+
+  if (size === 'sm') {
+    finalSize = '0.5rem';
+    fontSize = 'caption';
+    padding = '0.45em 0.775em';
+  } else if (size === 'lg') {
+    finalSize = '0.625rem';
+    fontSize = 'body2';
+    padding = '0.85em 1.375em';
+  } else if (size === 'md') {
+    finalSize = '0.5rem';
+    fontSize = 'button';
+    padding = '0.65em 1em';
+  } else {
+    finalSize = '0.375rem';
+    fontSize = 'caption';
+    padding = '0.45em 0.775em';
+  }
+
+  const validColors = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ];
+
+  const validColorIndex = validColors.findIndex((el) => el === color);
+
+  return (
+    <MDBox ref={ref} display="flex" alignItems="center" p={padding} {...rest}>
+      <MDBox
+        component="i"
+        display="inline-block"
+        width={finalSize}
+        height={finalSize}
+        borderRadius="50%"
+        bgColor={validColors[validColorIndex]}
+        variant={variant}
+        mr={1}
+      />
+      <MDTypography
+        variant={fontSize}
+        fontWeight={font.weight ? font.weight : 'regular'}
+        color={font.color ? font.color : 'dark'}
+        sx={{ lineHeight: 0 }}
+      >
+        {badgeContent}
+      </MDTypography>
+    </MDBox>
+  );
+});
+
+// Setting default values for the props of MDBadgeDot
+MDBadgeDot.defaultProps = {
+  variant: 'contained',
+  color: 'info',
+  size: 'xs',
+  font: {}
+};
+
+// Typechecking props of the MDBadgeDot
+MDBadgeDot.propTypes = {
+  variant: PropTypes.oneOf(['contained', 'gradient']),
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  badgeContent: PropTypes.string.isRequired,
+  font: PropTypes.shape({
+    color: PropTypes.string,
+    weight: PropTypes.string
+  })
+};
+
+export default MDBadgeDot;

src/components/MDBox/MDBoxRoot.js

@@ -0,0 +1,122 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+export default styled(Box)(({ theme, ownerState }) => {
+  const { palette, functions, borders, boxShadows } = theme;
+  const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState;
+
+  const { gradients, grey, white } = palette;
+  const { linearGradient } = functions;
+  const { borderRadius: radius } = borders;
+  const { colored } = boxShadows;
+
+  const greyColors = {
+    'grey-100': grey[100],
+    'grey-200': grey[200],
+    'grey-300': grey[300],
+    'grey-400': grey[400],
+    'grey-500': grey[500],
+    'grey-600': grey[600],
+    'grey-700': grey[700],
+    'grey-800': grey[800],
+    'grey-900': grey[900]
+  };
+
+  const validGradients = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'dark',
+    'light'
+  ];
+
+  const validColors = [
+    'transparent',
+    'white',
+    'black',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark',
+    'text',
+    'grey-100',
+    'grey-200',
+    'grey-300',
+    'grey-400',
+    'grey-500',
+    'grey-600',
+    'grey-700',
+    'grey-800',
+    'grey-900'
+  ];
+
+  const validBorderRadius = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'section'];
+  const validBoxShadows = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'inset'];
+
+  // background value
+  let backgroundValue = bgColor;
+
+  if (variant === 'gradient') {
+    backgroundValue = validGradients.find((el) => el === bgColor)
+      ? linearGradient(gradients[bgColor].main, gradients[bgColor].state)
+      : white.main;
+  } else if (validColors.find((el) => el === bgColor)) {
+    backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor];
+  } else {
+    backgroundValue = bgColor;
+  }
+
+  // color value
+  let colorValue = color;
+
+  if (validColors.find((el) => el === color)) {
+    colorValue = palette[color] ? palette[color].main : greyColors[color];
+  }
+
+  // borderRadius value
+  let borderRadiusValue = borderRadius;
+
+  if (validBorderRadius.find((el) => el === borderRadius)) {
+    borderRadiusValue = radius[borderRadius];
+  }
+
+  // boxShadow value
+  let boxShadowValue = 'none';
+
+  if (validBoxShadows.find((el) => el === shadow)) {
+    boxShadowValue = boxShadows[shadow];
+  } else if (coloredShadow) {
+    boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : 'none';
+  }
+
+  return {
+    opacity,
+    background: backgroundValue,
+    color: colorValue,
+    borderRadius: borderRadiusValue,
+    boxShadow: boxShadowValue
+  };
+});

src/components/MDBox/index.js

@@ -0,0 +1,66 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for MDBox
+import MDBoxRoot from 'components/MDBox/MDBoxRoot';
+
+const MDBox = forwardRef(
+  ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => (
+    <MDBoxRoot
+      {...rest}
+      ref={ref}
+      ownerState={{ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow }}
+    />
+  )
+);
+
+// Setting default values for the props of MDBox
+MDBox.defaultProps = {
+  variant: 'contained',
+  bgColor: 'transparent',
+  color: 'dark',
+  opacity: 1,
+  borderRadius: 'none',
+  shadow: 'none',
+  coloredShadow: 'none'
+};
+
+// Typechecking props for the MDBox
+MDBox.propTypes = {
+  variant: PropTypes.oneOf(['contained', 'gradient']),
+  bgColor: PropTypes.string,
+  color: PropTypes.string,
+  opacity: PropTypes.number,
+  borderRadius: PropTypes.string,
+  shadow: PropTypes.string,
+  coloredShadow: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark',
+    'none'
+  ])
+};
+
+export default MDBox;

src/components/MDButton/MDButtonRoot.js

@@ -0,0 +1,276 @@
+/* eslint-disable prefer-destructuring */
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+export default styled(Button)(({ theme, ownerState }) => {
+  const { palette, functions, borders, boxShadows } = theme;
+  const { color, variant, size, circular, iconOnly, darkMode } = ownerState;
+
+  const { white, text, transparent, gradients, grey } = palette;
+  const { boxShadow, linearGradient, pxToRem, rgba } = functions;
+  const { borderRadius } = borders;
+  const { colored } = boxShadows;
+
+  // styles for the button with variant="contained"
+  const containedStyles = () => {
+    // background color value
+    const backgroundValue = palette[color] ? palette[color].main : white.main;
+
+    // backgroundColor value when button is focused
+    const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus;
+
+    // boxShadow value
+    const boxShadowValue = colored[color]
+      ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
+        [0, 3],
+        [1, -2],
+        palette[color].main,
+        0.2
+      )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
+      : 'none';
+
+    // boxShadow value when button is hovered
+    const hoveredBoxShadowValue = colored[color]
+      ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
+        [0, 4],
+        [23, 0],
+        palette[color].main,
+        0.15
+      )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
+      : 'none';
+
+    // color value
+    let colorValue = white.main;
+
+    if (!darkMode && (color === 'white' || color === 'light' || !palette[color])) {
+      colorValue = text.main;
+    } else if (darkMode && (color === 'white' || color === 'light' || !palette[color])) {
+      colorValue = grey[600];
+    }
+
+    // color value when button is focused
+    let focusedColorValue = white.main;
+
+    if (color === 'white') {
+      focusedColorValue = text.main;
+    } else if (color === 'primary' || color === 'error' || color === 'dark') {
+      focusedColorValue = white.main;
+    }
+
+    return {
+      background: backgroundValue,
+      color: colorValue,
+      boxShadow: boxShadowValue,
+
+      '&:hover': {
+        backgroundColor: backgroundValue,
+        boxShadow: hoveredBoxShadowValue
+      },
+
+      '&:focus:not(:hover)': {
+        backgroundColor: focusedBackgroundValue,
+        boxShadow: palette[color]
+          ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
+          : boxShadow([0, 0], [0, 3.2], white.main, 0.5)
+      },
+
+      '&:disabled': {
+        backgroundColor: backgroundValue,
+        color: focusedColorValue
+      }
+    };
+  };
+
+  // styles for the button with variant="outlined"
+  const outliedStyles = () => {
+    // background color value
+    const backgroundValue = color === 'white' ? rgba(white.main, 0.1) : transparent.main;
+
+    // color value
+    const colorValue = palette[color] ? palette[color].main : white.main;
+
+    // boxShadow value
+    const boxShadowValue = palette[color]
+      ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
+      : boxShadow([0, 0], [0, 3.2], white.main, 0.5);
+
+    // border color value
+    let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75);
+
+    if (color === 'white') {
+      borderColorValue = rgba(white.main, 0.75);
+    }
+
+    return {
+      background: backgroundValue,
+      color: colorValue,
+      borderColor: borderColorValue,
+
+      '&:hover': {
+        background: transparent.main,
+        borderColor: colorValue
+      },
+
+      '&:focus:not(:hover)': {
+        background: transparent.main,
+        boxShadow: boxShadowValue
+      },
+
+      '&:active:not(:hover)': {
+        backgroundColor: colorValue,
+        color: white.main,
+        opacity: 0.85
+      },
+
+      '&:disabled': {
+        color: colorValue,
+        borderColor: colorValue
+      }
+    };
+  };
+
+  // styles for the button with variant="gradient"
+  const gradientStyles = () => {
+    // background value
+    const backgroundValue =
+      color === 'white' || !gradients[color]
+        ? white.main
+        : linearGradient(gradients[color].main, gradients[color].state);
+
+    // boxShadow value
+    const boxShadowValue = colored[color]
+      ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
+        [0, 3],
+        [1, -2],
+        palette[color].main,
+        0.2
+      )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
+      : 'none';
+
+    // boxShadow value when button is hovered
+    const hoveredBoxShadowValue = colored[color]
+      ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
+        [0, 4],
+        [23, 0],
+        palette[color].main,
+        0.15
+      )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
+      : 'none';
+
+    // color value
+    let colorValue = white.main;
+
+    if (color === 'white') {
+      colorValue = text.main;
+    } else if (color === 'light') {
+      colorValue = gradients.dark.state;
+    }
+
+    return {
+      background: backgroundValue,
+      color: colorValue,
+      boxShadow: boxShadowValue,
+
+      '&:hover': {
+        boxShadow: hoveredBoxShadowValue
+      },
+
+      '&:focus:not(:hover)': {
+        boxShadow: boxShadowValue
+      },
+
+      '&:disabled': {
+        background: backgroundValue,
+        color: colorValue
+      }
+    };
+  };
+
+  // styles for the button with variant="text"
+  const textStyles = () => {
+    // color value
+    const colorValue = palette[color] ? palette[color].main : white.main;
+
+    // color value when button is focused
+    const focusedColorValue = palette[color] ? palette[color].focus : white.focus;
+
+    return {
+      color: colorValue,
+
+      '&:hover': {
+        color: focusedColorValue
+      },
+
+      '&:focus:not(:hover)': {
+        color: focusedColorValue
+      }
+    };
+  };
+
+  // styles for the button with circular={true}
+  const circularStyles = () => ({
+    borderRadius: borderRadius.section
+  });
+
+  // styles for the button with iconOnly={true}
+  const iconOnlyStyles = () => {
+    // width, height, minWidth and minHeight values
+    let sizeValue = pxToRem(38);
+
+    if (size === 'small') {
+      sizeValue = pxToRem(25.4);
+    } else if (size === 'large') {
+      sizeValue = pxToRem(52);
+    }
+
+    // padding value
+    let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`;
+
+    if (size === 'small') {
+      paddingValue = pxToRem(4.5);
+    } else if (size === 'large') {
+      paddingValue = pxToRem(16);
+    }
+
+    return {
+      width: sizeValue,
+      minWidth: sizeValue,
+      height: sizeValue,
+      minHeight: sizeValue,
+      padding: paddingValue,
+
+      '& .material-icons': {
+        marginTop: 0
+      },
+
+      '&:hover, &:focus, &:active': {
+        transform: 'none'
+      }
+    };
+  };
+
+  return {
+    ...(variant === 'contained' && containedStyles()),
+    ...(variant === 'outlined' && outliedStyles()),
+    ...(variant === 'gradient' && gradientStyles()),
+    ...(variant === 'text' && textStyles()),
+    ...(circular && circularStyles()),
+    ...(iconOnly && iconOnlyStyles())
+  };
+});

src/components/MDButton/index.js

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for MDButton
+import MDButtonRoot from 'components/MDButton/MDButtonRoot';
+
+// Material Dashboard 2 PRO React contexts
+import { useMaterialUIController } from 'context';
+
+const MDButton = forwardRef(
+  ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => {
+    const [controller] = useMaterialUIController();
+    const { darkMode } = controller;
+
+    return (
+      <MDButtonRoot
+        {...rest}
+        ref={ref}
+        color="primary"
+        variant={variant === 'gradient' ? 'contained' : variant}
+        size={size}
+        ownerState={{ color, variant, size, circular, iconOnly, darkMode }}
+      >
+        {children}
+      </MDButtonRoot>
+    );
+  }
+);
+
+// Setting default values for the props of MDButton
+MDButton.defaultProps = {
+  size: 'medium',
+  variant: 'contained',
+  color: 'white',
+  circular: false,
+  iconOnly: false
+};
+
+// Typechecking props for the MDButton
+MDButton.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['text', 'contained', 'outlined', 'gradient']),
+  color: PropTypes.oneOf([
+    'white',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  circular: PropTypes.bool,
+  iconOnly: PropTypes.bool,
+  children: PropTypes.node.isRequired
+};
+
+export default MDButton;

src/components/MDDatePicker/index.js

@@ -0,0 +1,49 @@
+/**
+=========================================================
+* 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-flatpickr components
+import Flatpickr from 'react-flatpickr';
+
+// react-flatpickr styles
+import 'flatpickr/dist/flatpickr.css';
+
+// Material Dashboard 2 PRO React components
+import MDInput from 'components/MDInput';
+
+function MDDatePicker({ input, ...rest }) {
+  return (
+    <Flatpickr
+      {...rest}
+      render={({ defaultValue }, ref) => (
+        <MDInput {...input} defaultValue={defaultValue} inputRef={ref} />
+      )}
+    />
+  );
+}
+
+// Setting default values for the props of MDDatePicker
+MDDatePicker.defaultProps = {
+  input: {}
+};
+
+// Typechecking props for the MDDatePicker
+MDDatePicker.propTypes = {
+  input: PropTypes.objectOf(PropTypes.any)
+};
+
+export default MDDatePicker;

src/components/MDDropzone/MDDropzoneRoot.js

@@ -0,0 +1,74 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+export default styled(Box)(({ theme, ownerState }) => {
+  const { palette, typography, borders, functions } = theme;
+  const { darkMode } = ownerState;
+
+  const { text, white, dark, inputBorderColor, transparent } = palette;
+  const { size } = typography;
+  const { borderRadius, borderWidth } = borders;
+  const { rgba } = functions;
+
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    border: `${borderWidth[1]} solid ${inputBorderColor} !important`,
+    borderRadius: borderRadius.md,
+
+    '&.dropzone': {
+      background: `${transparent.main} !important`
+    },
+
+    '& .dz-default': {
+      margin: '0 auto !important'
+    },
+
+    '& .dz-default .dz-button': {
+      color: `${text.main} !important`,
+      fontSize: `${size.sm} !important`
+    },
+
+    '& .dz-preview.dz-image-preview': {
+      background: `${transparent.main} !important`
+    },
+
+    '& .dz-preview .dz-details': {
+      color: `${dark.main} !important`,
+      opacity: '1 !important',
+
+      '& .dz-size span, & .dz-filename span': {
+        backgroundColor: `${rgba(white.main, 0.7)} !important`
+      }
+    },
+
+    '& .dz-error-message': {
+      display: 'none !important'
+    },
+
+    '& .dz-remove': {
+      color: `${darkMode ? white.main : dark.main} !important`,
+      textDecoration: 'none',
+
+      '&:hover, &:focus': {
+        textDecoration: 'none !important'
+      }
+    }
+  };
+});

src/components/MDDropzone/index.js

@@ -0,0 +1,78 @@
+/**
+=========================================================
+* 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 { useEffect, useRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Dropzone components
+import Dropzone from 'dropzone';
+
+// Dropzone styles
+import 'dropzone/dist/dropzone.css';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+
+// Custom styles for the MDDropzone
+import MDDropzoneRoot from 'components/MDDropzone/MDDropzoneRoot';
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from 'context';
+
+function MDDropzone({ options }) {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  const dropzoneRef = useRef();
+
+  useEffect(() => {
+    Dropzone.autoDiscover = false;
+
+    function createDropzone() {
+      return new Dropzone(dropzoneRef.current, { ...options });
+    }
+
+    function removeDropzone() {
+      if (Dropzone.instances.length > 0) Dropzone.instances.forEach((dz) => dz.destroy());
+    }
+
+    createDropzone();
+
+    return () => removeDropzone();
+  }, [options]);
+
+  return (
+    <MDDropzoneRoot
+      component="form"
+      action="/file-upload"
+      ref={dropzoneRef}
+      className="form-control dropzone"
+      ownerState={{ darkMode }}
+    >
+      <MDBox className="fallback" bgColor="transparent">
+        <MDBox multiple component="input" name="file" type="file" />
+      </MDBox>
+    </MDDropzoneRoot>
+  );
+}
+
+// Typechecking props for the MDDropzone
+MDDropzone.propTypes = {
+  options: PropTypes.objectOf(PropTypes.any).isRequired
+};
+
+export default MDDropzone;

src/components/MDEditor/MDEditorRoot.js

@@ -0,0 +1,54 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import { styled } from '@mui/material/styles';
+
+export default styled('div')(({ theme, ownerState }) => {
+  const { palette, borders, typography } = theme;
+  const { darkMode } = ownerState;
+
+  const { borderRadius } = borders;
+  const { size } = typography;
+  const { text, white, dark } = palette;
+
+  return {
+    '& .ql-toolbar': {
+      borderRadius: `${borderRadius.md} ${borderRadius.md} 0 0`,
+
+      '& .ql-picker, & .ql-stroke': {
+        stroke: `${darkMode ? white.main : dark.main} !important`,
+        color: `${darkMode ? white.main : dark.main} !important`
+      }
+    },
+
+    '& .ql-container': {
+      borderRadius: `0 0 ${borderRadius.md} ${borderRadius.md}`
+    },
+
+    '& .ql-editor': {
+      color: darkMode ? white.main : text.main,
+
+      '& p': {
+        fontSize: size.md,
+        color: darkMode ? white.main : text.main
+      },
+
+      '& ul li': {
+        color: darkMode ? white.main : text.main
+      }
+    }
+  };
+});

src/components/MDEditor/index.js

@@ -0,0 +1,38 @@
+/**
+=========================================================
+* 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.
+*/
+// react-quill components
+import ReactQuill from 'react-quill';
+
+// react-quill styles
+import 'react-quill/dist/quill.snow.css';
+
+// Custom styles for the MDEditor
+import MDEditorRoot from 'components/MDEditor/MDEditorRoot';
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from 'context';
+
+function MDEditor(props) {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  return (
+    <MDEditorRoot ownerState={{ darkMode }}>
+      <ReactQuill theme="snow" {...props} />
+    </MDEditorRoot>
+  );
+}
+
+export default MDEditor;

src/components/MDInput/MDInputRoot.js

@@ -0,0 +1,71 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
+
+export default styled(TextField)(({ theme, ownerState }) => {
+  const { palette, functions } = theme;
+  const { error, success, disabled } = ownerState;
+
+  const { grey, transparent, error: colorError, success: colorSuccess } = palette;
+  const { pxToRem } = functions;
+
+  // styles for the input with error={true}
+  const errorStyles = () => ({
+    backgroundImage:
+      'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' fill=\'none\' stroke=\'%23F44335\' viewBox=\'0 0 12 12\'%3E%3Ccircle cx=\'6\' cy=\'6\' r=\'4.5\'/%3E%3Cpath stroke-linejoin=\'round\' d=\'M5.8 3.6h.4L6 6.5z\'/%3E%3Ccircle cx=\'6\' cy=\'8.2\' r=\'.6\' fill=\'%23F44335\' stroke=\'none\'/%3E%3C/svg%3E")',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: `right ${pxToRem(12)} center`,
+    backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
+
+    '& .Mui-focused': {
+      '& .MuiOutlinedInput-notchedOutline, &:after': {
+        borderColor: colorError.main
+      }
+    },
+
+    '& .MuiInputLabel-root.Mui-focused': {
+      color: colorError.main
+    }
+  });
+
+  // styles for the input with success={true}
+  const successStyles = () => ({
+    backgroundImage:
+      'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 10 8\'%3E%3Cpath fill=\'%234CAF50\' d=\'M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z\'/%3E%3C/svg%3E")',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: `right ${pxToRem(12)} center`,
+    backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
+
+    '& .Mui-focused': {
+      '& .MuiOutlinedInput-notchedOutline, &:after': {
+        borderColor: colorSuccess.main
+      }
+    },
+
+    '& .MuiInputLabel-root.Mui-focused': {
+      color: colorSuccess.main
+    }
+  });
+
+  return {
+    backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
+    pointerEvents: disabled ? 'none' : 'auto',
+    ...(error && errorStyles()),
+    ...(success && successStyles())
+  };
+});

src/components/MDInput/index.js

@@ -0,0 +1,42 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for MDInput
+import MDInputRoot from 'components/MDInput/MDInputRoot';
+
+const MDInput = forwardRef(({ error, success, disabled, ...rest }, ref) => (
+  <MDInputRoot {...rest} ref={ref} ownerState={{ error, success, disabled }} />
+));
+
+// Setting default values for the props of MDInput
+MDInput.defaultProps = {
+  error: false,
+  success: false,
+  disabled: false
+};
+
+// Typechecking props for the MDInput
+MDInput.propTypes = {
+  error: PropTypes.bool,
+  success: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+
+export default MDInput;

src/components/MDPagination/MDPaginationItemRoot.js

@@ -0,0 +1,62 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import { styled } from '@mui/material/styles';
+
+// Material Dashboard 2 PRO React components
+import MDButton from 'components/MDButton';
+
+export default styled(MDButton)(({ theme, ownerState }) => {
+  const { borders, functions, typography, palette } = theme;
+  const { variant, paginationSize, active } = ownerState;
+
+  const { borderColor } = borders;
+  const { pxToRem } = functions;
+  const { fontWeightRegular, size: fontSize } = typography;
+  const { light } = palette;
+
+  // width, height, minWidth and minHeight values
+  let sizeValue = pxToRem(36);
+
+  if (paginationSize === 'small') {
+    sizeValue = pxToRem(30);
+  } else if (paginationSize === 'large') {
+    sizeValue = pxToRem(46);
+  }
+
+  return {
+    borderColor,
+    margin: `0 ${pxToRem(2)}`,
+    pointerEvents: active ? 'none' : 'auto',
+    fontWeight: fontWeightRegular,
+    fontSize: fontSize.sm,
+    width: sizeValue,
+    minWidth: sizeValue,
+    height: sizeValue,
+    minHeight: sizeValue,
+
+    '&:hover, &:focus, &:active': {
+      transform: 'none',
+      boxShadow: (variant !== 'gradient' || variant !== 'contained') && 'none !important',
+      opacity: '1 !important'
+    },
+
+    '&:hover': {
+      backgroundColor: light.main,
+      borderColor
+    }
+  };
+});

src/components/MDPagination/index.js

@@ -0,0 +1,93 @@
+/**
+=========================================================
+* 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 { forwardRef, createContext, useContext } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+
+// Custom styles for MDPagination
+import MDPaginationItemRoot from 'components/MDPagination/MDPaginationItemRoot';
+
+// The Pagination main context
+const Context = createContext();
+
+const MDPagination = forwardRef(
+  ({ item, variant, color, size, active, children, ...rest }, ref) => {
+    const context = item ? useContext(Context) : null;
+    const paginationSize = context ? context.size : null;
+
+    return (
+      <Context.Provider value={{ variant, color, size }}>
+        {item ? (
+          <MDPaginationItemRoot
+            {...rest}
+            iconOnly
+            circular
+            ref={ref}
+            variant={active ? context.variant : 'outlined'}
+            color={active ? context.color : 'secondary'}
+            ownerState={{ variant, active, paginationSize }}
+          >
+            {children}
+          </MDPaginationItemRoot>
+        ) : (
+          <MDBox
+            display="flex"
+            justifyContent="flex-end"
+            alignItems="center"
+            sx={{ listStyle: 'none' }}
+          >
+            {children}
+          </MDBox>
+        )}
+      </Context.Provider>
+    );
+  }
+);
+
+// Setting default values for the props of MDPagination
+MDPagination.defaultProps = {
+  item: false,
+  variant: 'gradient',
+  color: 'info',
+  size: 'medium',
+  active: false
+};
+
+// Typechecking props for the MDPagination
+MDPagination.propTypes = {
+  item: PropTypes.bool,
+  variant: PropTypes.oneOf(['gradient', 'contained']),
+  color: PropTypes.oneOf([
+    'white',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  active: PropTypes.bool,
+  children: PropTypes.node.isRequired
+};
+
+export default MDPagination;

src/components/MDProgress/MDProgressRoot.js

@@ -0,0 +1,45 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import { styled } from '@mui/material/styles';
+import LinearProgress from '@mui/material/LinearProgress';
+
+export default styled(LinearProgress)(({ theme, ownerState }) => {
+  const { palette, functions } = theme;
+  const { color, value, variant } = ownerState;
+
+  const { text, gradients } = palette;
+  const { linearGradient } = functions;
+
+  // background value
+  let backgroundValue;
+
+  if (variant === 'gradient') {
+    backgroundValue = gradients[color]
+      ? linearGradient(gradients[color].main, gradients[color].state)
+      : linearGradient(gradients.info.main, gradients.info.state);
+  } else {
+    backgroundValue = palette[color] ? palette[color].main : palette.info.main;
+  }
+
+  return {
+    '& .MuiLinearProgress-bar': {
+      background: backgroundValue,
+      width: `${value}%`,
+      color: text.main
+    }
+  };
+});

src/components/MDProgress/index.js

@@ -0,0 +1,69 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Material Dashboard 2 PRO React components
+import MDTypography from 'components/MDTypography';
+
+// Custom styles for MDProgress
+import MDProgressRoot from 'components/MDProgress/MDProgressRoot';
+
+const MDProgress = forwardRef(({ variant, color, value, label, ...rest }, ref) => (
+  <>
+    {label && (
+      <MDTypography variant="button" fontWeight="medium" color="text">
+        {value}%
+      </MDTypography>
+    )}
+    <MDProgressRoot
+      {...rest}
+      ref={ref}
+      variant="determinate"
+      value={value}
+      ownerState={{ color, value, variant }}
+    />
+  </>
+));
+
+// Setting default values for the props of MDProgress
+MDProgress.defaultProps = {
+  variant: 'contained',
+  color: 'info',
+  value: 0,
+  label: false
+};
+
+// Typechecking props for the MDProgress
+MDProgress.propTypes = {
+  variant: PropTypes.oneOf(['contained', 'gradient']),
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  value: PropTypes.number,
+  label: PropTypes.bool
+};
+
+export default MDProgress;

src/components/MDSnackbar/MDSnackbarIconRoot.js

@@ -0,0 +1,47 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Icon from '@mui/material/Icon';
+import { styled } from '@mui/material/styles';
+
+export default styled(Icon)(({ theme, ownerState }) => {
+  const { palette, functions, typography } = theme;
+  const { color, bgWhite } = ownerState;
+
+  const { white, transparent, gradients } = palette;
+  const { pxToRem, linearGradient } = functions;
+  const { size } = typography;
+
+  // backgroundImage value
+  let backgroundImageValue;
+
+  if (bgWhite) {
+    backgroundImageValue = gradients[color]
+      ? linearGradient(gradients[color].main, gradients[color].state)
+      : linearGradient(gradients.info.main, gradients.info.state);
+  } else if (color === 'light') {
+    backgroundImageValue = linearGradient(gradients.dark.main, gradients.dark.state);
+  }
+
+  return {
+    backgroundImage: backgroundImageValue,
+    WebkitTextFillColor: bgWhite || color === 'light' ? transparent.main : white.main,
+    WebkitBackgroundClip: 'text',
+    marginRight: pxToRem(8),
+    fontSize: size.lg,
+    transform: `translateY(${pxToRem(-2)})`
+  };
+});

src/components/MDSnackbar/index.js

@@ -0,0 +1,174 @@
+/**
+=========================================================
+* 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 Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import Icon from '@mui/material/Icon';
+import Divider from '@mui/material/Divider';
+import Fade from '@mui/material/Fade';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+import MDTypography from 'components/MDTypography';
+
+// Custom styles for the MDSnackbar
+import MDSnackbarIconRoot from 'components/MDSnackbar/MDSnackbarIconRoot';
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from 'context';
+
+function MDSnackbar({ color, icon, title, dateTime, content, close, bgWhite, ...rest }) {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  let titleColor;
+  let dateTimeColor;
+  let dividerColor;
+
+  if (bgWhite) {
+    titleColor = color;
+    dateTimeColor = 'dark';
+    dividerColor = false;
+  } else if (color === 'light') {
+    titleColor = darkMode ? 'inherit' : 'dark';
+    dateTimeColor = darkMode ? 'inherit' : 'text';
+    dividerColor = false;
+  } else {
+    titleColor = 'white';
+    dateTimeColor = 'white';
+    dividerColor = true;
+  }
+
+  return (
+    <Snackbar
+      TransitionComponent={Fade}
+      autoHideDuration={5000}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right'
+      }}
+      {...rest}
+      action={
+        <IconButton size="small" aria-label="close" color="inherit" onClick={close}>
+          <Icon fontSize="small">close</Icon>
+        </IconButton>
+      }
+    >
+      <MDBox
+        variant={bgWhite ? 'contained' : 'gradient'}
+        bgColor={bgWhite ? 'white' : color}
+        minWidth="21.875rem"
+        maxWidth="100%"
+        shadow="md"
+        borderRadius="md"
+        p={1}
+        sx={{
+          backgroundColor: ({ palette }) =>
+            darkMode ? palette.background.card : palette[color] || palette.white.main
+        }}
+      >
+        <MDBox
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          color="dark"
+          p={1.5}
+        >
+          <MDBox display="flex" alignItems="center" lineHeight={0}>
+            <MDSnackbarIconRoot fontSize="small" ownerState={{ color, bgWhite }}>
+              {icon}
+            </MDSnackbarIconRoot>
+            <MDTypography
+              variant="button"
+              fontWeight="medium"
+              color={titleColor}
+              textGradient={bgWhite}
+            >
+              {title}
+            </MDTypography>
+          </MDBox>
+          <MDBox display="flex" alignItems="center" lineHeight={0}>
+            <MDTypography variant="caption" color={dateTimeColor}>
+              {dateTime}
+            </MDTypography>
+            <Icon
+              sx={{
+                color: ({ palette: { dark, white } }) =>
+                  (bgWhite && !darkMode) || color === 'light' ? dark.main : white.main,
+                fontWeight: ({ typography: { fontWeightBold } }) => fontWeightBold,
+                cursor: 'pointer',
+                marginLeft: 2,
+                transform: 'translateY(-1px)'
+              }}
+              onClick={close}
+            >
+              close
+            </Icon>
+          </MDBox>
+        </MDBox>
+        <Divider sx={{ margin: 0 }} light={dividerColor} />
+        <MDBox
+          p={1.5}
+          sx={{
+            fontSize: ({ typography: { size } }) => size.sm,
+            color: ({ palette: { white, text } }) => {
+              let colorValue = bgWhite || color === 'light' ? text.main : white.main;
+
+              if (darkMode) {
+                colorValue = color === 'light' ? 'inherit' : white.main;
+              }
+
+              return colorValue;
+            }
+          }}
+        >
+          {content}
+        </MDBox>
+      </MDBox>
+    </Snackbar>
+  );
+}
+
+// Setting default values for the props of MDSnackbar
+MDSnackbar.defaultProps = {
+  bgWhite: false,
+  color: 'info'
+};
+
+// Typechecking props for MDSnackbar
+MDSnackbar.propTypes = {
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'dark',
+    'light'
+  ]),
+  icon: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  dateTime: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  close: PropTypes.func.isRequired,
+  bgWhite: PropTypes.bool
+};
+
+export default MDSnackbar;

src/components/MDSocialButton/MDSocialButtonRoot.js

@@ -0,0 +1,89 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+export default styled(Button)(({ theme, ownerState }) => {
+  const { palette, functions } = theme;
+  const { color, size, iconOnly, circular } = ownerState;
+
+  const { white, socialMediaColors } = palette;
+  const { pxToRem } = functions;
+
+  // backgroundColor value
+  const backgroundColorValue = socialMediaColors[color]
+    ? socialMediaColors[color].main
+    : socialMediaColors.facebook.main;
+
+  // styles for the button with circular={true}
+  const circularStyles = () => ({
+    borderRadius: '50%'
+  });
+
+  // styles for the button with iconOnly={true}
+  const iconOnlyStyles = () => {
+    // width, height, minWidth and minHeight values
+    let sizeValue = pxToRem(38);
+
+    if (size === 'small') {
+      sizeValue = pxToRem(25.4);
+    } else if (size === 'large') {
+      sizeValue = pxToRem(52);
+    }
+
+    // padding value
+    let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`;
+
+    if (size === 'small') {
+      paddingValue = pxToRem(4.5);
+    } else if (size === 'large') {
+      paddingValue = pxToRem(16);
+    }
+
+    return {
+      width: sizeValue,
+      minWidth: sizeValue,
+      height: sizeValue,
+      minHeight: sizeValue,
+      padding: paddingValue
+    };
+  };
+
+  return {
+    backgroundColor: backgroundColorValue,
+    color: white.main,
+
+    '&:hover': {
+      backgroundColor: backgroundColorValue
+    },
+
+    '&:focus:not(:hover)': {
+      backgroundColor: socialMediaColors[color]
+        ? socialMediaColors[color].dark
+        : socialMediaColors.facebook.dark,
+      boxShadow: 'none'
+    },
+
+    '&:disabled': {
+      backgroundColor: backgroundColorValue,
+      color: white.main
+    },
+
+    ...(circular && circularStyles()),
+    ...(iconOnly && iconOnlyStyles())
+  };
+});

src/components/MDSocialButton/index.js

@@ -0,0 +1,67 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for MDSocialButton
+import MDSocialButtonRoot from 'components/MDSocialButton/MDSocialButtonRoot';
+
+const MDSocialButton = forwardRef(({ color, size, iconOnly, circular, children, ...rest }, ref) => (
+  <MDSocialButtonRoot
+    {...rest}
+    ref={ref}
+    variant="contained"
+    color="primary"
+    size={size}
+    ownerState={{ color, size, iconOnly, circular }}
+  >
+    {children}
+  </MDSocialButtonRoot>
+));
+
+// Setting default values for the props of MDSocialButton
+MDSocialButton.defaultProps = {
+  size: 'medium',
+  color: 'facebook',
+  iconOnly: false,
+  circular: false
+};
+
+// Typechecking props for the MDSocialButton
+MDSocialButton.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  color: PropTypes.oneOf([
+    'facebook',
+    'twitter',
+    'instagram',
+    'linkedin',
+    'pinterest',
+    'youtube',
+    'github',
+    'vimeo',
+    'slack',
+    'dribbble',
+    'reddit',
+    'tumblr'
+  ]),
+  iconOnly: PropTypes.bool,
+  circular: PropTypes.bool,
+  children: PropTypes.node.isRequired
+};
+
+export default MDSocialButton;

src/components/MDTypography/MDTypographyRoot.js

@@ -0,0 +1,66 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+
+export default styled(Typography)(({ theme, ownerState }) => {
+  const { palette, typography, functions } = theme;
+  const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } =
+    ownerState;
+
+  const { gradients, transparent, white } = palette;
+  const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography;
+  const { linearGradient } = functions;
+
+  // fontWeight styles
+  const fontWeights = {
+    light: fontWeightLight,
+    regular: fontWeightRegular,
+    medium: fontWeightMedium,
+    bold: fontWeightBold
+  };
+
+  // styles for the typography with textGradient={true}
+  const gradientStyles = () => ({
+    backgroundImage:
+      color !== 'inherit' && color !== 'text' && color !== 'white' && gradients[color]
+        ? linearGradient(gradients[color].main, gradients[color].state)
+        : linearGradient(gradients.dark.main, gradients.dark.state),
+    display: 'inline-block',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: transparent.main,
+    position: 'relative',
+    zIndex: 1
+  });
+
+  // color value
+  let colorValue = color === 'inherit' || !palette[color] ? 'inherit' : palette[color].main;
+
+  if (darkMode && (color === 'inherit' || !palette[color])) {
+    colorValue = 'inherit';
+  } else if (darkMode && color === 'dark') colorValue = white.main;
+
+  return {
+    opacity,
+    textTransform,
+    verticalAlign,
+    textDecoration: 'none',
+    color: colorValue,
+    fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight],
+    ...(textGradient && gradientStyles())
+  };
+});

src/components/MDTypography/index.js

@@ -0,0 +1,98 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for MDTypography
+import MDTypographyRoot from 'components/MDTypography/MDTypographyRoot';
+
+// Material Dashboard 2 PRO React contexts
+import { useMaterialUIController } from 'context';
+
+const MDTypography = forwardRef(
+  (
+    { color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest },
+    ref
+  ) => {
+    const [controller] = useMaterialUIController();
+    const { darkMode } = controller;
+
+    return (
+      <MDTypographyRoot
+        {...rest}
+        ref={ref}
+        ownerState={{
+          color,
+          textTransform,
+          verticalAlign,
+          fontWeight,
+          opacity,
+          textGradient,
+          darkMode
+        }}
+      >
+        {children}
+      </MDTypographyRoot>
+    );
+  }
+);
+
+// Setting default values for the props of MDTypography
+MDTypography.defaultProps = {
+  color: 'dark',
+  fontWeight: false,
+  textTransform: 'none',
+  verticalAlign: 'unset',
+  textGradient: false,
+  opacity: 1
+};
+
+// Typechecking props for the MDTypography
+MDTypography.propTypes = {
+  color: PropTypes.oneOf([
+    'inherit',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark',
+    'text',
+    'white'
+  ]),
+  fontWeight: PropTypes.oneOf([false, 'light', 'regular', 'medium', 'bold']),
+  textTransform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
+  verticalAlign: PropTypes.oneOf([
+    'unset',
+    'baseline',
+    'sub',
+    'super',
+    'text-top',
+    'text-bottom',
+    'middle',
+    'top',
+    'bottom'
+  ]),
+  textGradient: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  opacity: PropTypes.number
+};
+
+export default MDTypography;

src/components/Navbars/DashboardNavbar/index.js

@@ -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;

src/components/Navbars/DashboardNavbar/styles.js

@@ -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
+};

src/components/Navbars/DefaultNavbar/DefaultNavbarCategory.js

@@ -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;

src/components/Navbars/DefaultNavbar/DefaultNavbarLink.js

@@ -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;

src/components/Navbars/DefaultNavbar/DefaultNavbarMenu.js

@@ -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;

src/components/Navbars/DefaultNavbar/DefaultNavbarMobile.js

@@ -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;

src/components/Navbars/DefaultNavbar/Menus/ApplicationsMenu.js

@@ -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;

src/components/Navbars/DefaultNavbar/Menus/AuthenticationMenu.js

@@ -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}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <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;

src/components/Navbars/DefaultNavbar/Menus/DocsMenu.js

@@ -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;

src/components/Navbars/DefaultNavbar/Menus/EcommerceMenu.js

@@ -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;

src/components/Navbars/DefaultNavbar/Menus/PagesMenu.js

@@ -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;

src/components/Navbars/DefaultNavbar/index.js

@@ -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;

src/components/NotificationItem/index.js

@@ -0,0 +1,51 @@
+/**
+=========================================================
+* 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 { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props.
+import PropTypes from 'prop-types';
+
+// @mui material components
+import MenuItem from '@mui/material/MenuItem';
+import Link from '@mui/material/Link';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+import MDTypography from 'components/MDTypography';
+
+// custom styles for the NotificationItem
+import menuItem from 'components/NotificationItem/styles';
+
+const NotificationItem = forwardRef(({ icon, title, ...rest }, ref) => (
+  <MenuItem {...rest} ref={ref} sx={(theme) => menuItem(theme)}>
+    <MDBox component={Link} py={0.5} display="flex" alignItems="center" lineHeight={1}>
+      <MDTypography variant="body1" color="secondary" lineHeight={0.75}>
+        {icon}
+      </MDTypography>
+      <MDTypography variant="button" fontWeight="regular" sx={{ ml: 1 }}>
+        {title}
+      </MDTypography>
+    </MDBox>
+  </MenuItem>
+));
+
+// Typechecking props for the NotificationItem
+NotificationItem.propTypes = {
+  icon: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired
+};
+
+export default NotificationItem;

src/components/NotificationItem/styles.js

@@ -0,0 +1,36 @@
+function menuItem(theme) {
+  const { palette, borders, transitions } = theme;
+
+  const { secondary, light, dark } = palette;
+  const { borderRadius } = borders;
+
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    color: secondary.main,
+    borderRadius: borderRadius.md,
+    transition: transitions.create('background-color', {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.standard
+    }),
+
+    '& *': {
+      transition: 'color 100ms linear'
+    },
+
+    '&:not(:last-child)': {
+      mb: 1
+    },
+
+    '&:hover': {
+      backgroundColor: light.main,
+
+      '& *': {
+        color: dark.main
+      }
+    }
+  };
+}
+
+export default menuItem;

src/components/Sidenav/SidenavCollapse.js

@@ -0,0 +1,120 @@
+/**
+=========================================================
+* 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 ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Icon from '@mui/material/Icon';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+
+// Custom styles for the SidenavCollapse
+import {
+  collapseItem,
+  collapseIconBox,
+  collapseIcon,
+  collapseText,
+  collapseArrow
+} from 'components/Sidenav/styles/sidenavCollapse';
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from 'context';
+
+function SidenavCollapse({ icon, name, children, active, noCollapse, open, ...rest }) {
+  const [controller] = useMaterialUIController();
+  const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
+
+  return (
+    <>
+      <ListItem component="li">
+        <MDBox
+          {...rest}
+          sx={(theme) =>
+            collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode })
+          }
+        >
+          <ListItemIcon
+            sx={(theme) => collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode })}
+          >
+            {typeof icon === 'string' ? (
+              <Icon sx={(theme) => collapseIcon(theme, { active })}>{icon}</Icon>
+            ) : (
+              icon
+            )}
+          </ListItemIcon>
+
+          <ListItemText
+            primary={name}
+            sx={(theme) =>
+              collapseText(theme, {
+                miniSidenav,
+                transparentSidenav,
+                whiteSidenav,
+                active
+              })
+            }
+          />
+
+          <Icon
+            sx={(theme) =>
+              collapseArrow(theme, {
+                noCollapse,
+                transparentSidenav,
+                whiteSidenav,
+                miniSidenav,
+                open,
+                active,
+                darkMode
+              })
+            }
+          >
+            expand_less
+          </Icon>
+        </MDBox>
+      </ListItem>
+      {children && (
+        <Collapse unmountOnExit in={open}>
+          {children}
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+// Setting default values for the props of SidenavCollapse
+SidenavCollapse.defaultProps = {
+  active: false,
+  noCollapse: false,
+  children: false,
+  open: false
+};
+
+// Typechecking props for the SidenavCollapse
+SidenavCollapse.propTypes = {
+  icon: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  active: PropTypes.bool,
+  noCollapse: PropTypes.bool,
+  open: PropTypes.bool
+};
+
+export default SidenavCollapse;

src/components/Sidenav/SidenavItem.js

@@ -0,0 +1,100 @@
+/**
+=========================================================
+* 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 ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Icon from '@mui/material/Icon';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+
+// Custom styles for the SidenavItem
+import { item, itemContent, itemArrow } from 'components/Sidenav/styles/sidenavItem';
+
+// Material Dashboard 2 PRO React contexts
+import { useMaterialUIController } from 'context';
+
+function SidenavItem({ color, name, active, nested, children, open, ...rest }) {
+  const [controller] = useMaterialUIController();
+  const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
+
+  return (
+    <>
+      <ListItem
+        {...rest}
+        component="li"
+        sx={(theme) => item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode })}
+      >
+        <MDBox
+          sx={(theme) =>
+            itemContent(theme, {
+              active,
+              miniSidenav,
+              name,
+              open,
+              nested,
+              transparentSidenav,
+              whiteSidenav,
+              darkMode
+            })
+          }
+        >
+          <ListItemText primary={name} />
+          {children && (
+            <Icon
+              component="i"
+              sx={(theme) =>
+                itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode })
+              }
+            >
+              expand_less
+            </Icon>
+          )}
+        </MDBox>
+      </ListItem>
+      {children && (
+        <Collapse unmountOnExit in={open} timeout="auto" {...rest}>
+          {children}
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+// Setting default values for the props of SidenavItem
+SidenavItem.defaultProps = {
+  color: 'info',
+  active: false,
+  nested: false,
+  children: false,
+  open: false
+};
+
+// Typechecking props for the SidenavItem
+SidenavItem.propTypes = {
+  color: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'dark']),
+  name: PropTypes.string.isRequired,
+  active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  nested: PropTypes.bool,
+  children: PropTypes.node,
+  open: PropTypes.bool
+};
+
+export default SidenavItem;

src/components/Sidenav/SidenavList.js

@@ -0,0 +1,40 @@
+/**
+=========================================================
+* 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 List from '@mui/material/List';
+
+function SidenavList({ children }) {
+  return (
+    <List
+      sx={{
+        px: 2,
+        my: 0.3
+      }}
+    >
+      {children}
+    </List>
+  );
+}
+
+// Typechecking props for the SidenavItem
+SidenavList.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default SidenavList;

src/components/Sidenav/SidenavRoot.js

@@ -0,0 +1,92 @@
+/**
+=========================================================
+* 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.
+*/
+
+// @mui material components
+import Drawer from '@mui/material/Drawer';
+import { styled } from '@mui/material/styles';
+
+export default styled(Drawer)(({ theme, ownerState }) => {
+  const { palette, boxShadows, transitions, breakpoints, functions } = theme;
+  const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState;
+
+  const sidebarWidth = 250;
+  const { transparent, gradients, white, background } = palette;
+  const { xxl } = boxShadows;
+  const { pxToRem, linearGradient } = functions;
+
+  let backgroundValue = darkMode
+    ? background.sidenav
+    : linearGradient(gradients.dark.main, gradients.dark.state);
+
+  if (transparentSidenav) {
+    backgroundValue = transparent.main;
+  } else if (whiteSidenav) {
+    backgroundValue = white.main;
+  }
+
+  // styles for the sidenav when miniSidenav={false}
+  const drawerOpenStyles = () => ({
+    background: backgroundValue,
+    transform: 'translateX(0)',
+    transition: transitions.create('transform', {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.shorter
+    }),
+
+    [breakpoints.up('xl')]: {
+      boxShadow: transparentSidenav ? 'none' : xxl,
+      marginBottom: transparentSidenav ? 0 : 'inherit',
+      left: '0',
+      width: sidebarWidth,
+      transform: 'translateX(0)',
+      transition: transitions.create(['width', 'background-color'], {
+        easing: transitions.easing.sharp,
+        duration: transitions.duration.enteringScreen
+      })
+    }
+  });
+
+  // styles for the sidenav when miniSidenav={true}
+  const drawerCloseStyles = () => ({
+    background: backgroundValue,
+    transform: `translateX(${pxToRem(-320)})`,
+    transition: transitions.create('transform', {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.shorter
+    }),
+
+    [breakpoints.up('xl')]: {
+      boxShadow: transparentSidenav ? 'none' : xxl,
+      marginBottom: transparentSidenav ? 0 : 'inherit',
+      left: '0',
+      width: pxToRem(96),
+      overflowX: 'hidden',
+      transform: 'translateX(0)',
+      transition: transitions.create(['width', 'background-color'], {
+        easing: transitions.easing.sharp,
+        duration: transitions.duration.shorter
+      })
+    }
+  });
+
+  return {
+    '& .MuiDrawer-paper': {
+      boxShadow: xxl,
+      border: 'none',
+
+      ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles())
+    }
+  };
+});

src/components/Sidenav/index.js

@@ -0,0 +1,285 @@
+/**
+=========================================================
+* 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 { useEffect, useState } from 'react';
+
+// react-router-dom components
+import { useLocation, NavLink } from 'react-router-dom';
+
+// prop-types is a library for typechecking of props.
+import PropTypes from 'prop-types';
+
+// @mui material components
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
+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 SidenavCollapse from 'components/Sidenav/SidenavCollapse';
+import SidenavList from 'components/Sidenav/SidenavList';
+import SidenavItem from 'components/Sidenav/SidenavItem';
+
+// Custom styles for the Sidenav
+import SidenavRoot from 'components/Sidenav/SidenavRoot';
+import sidenavLogoLabel from 'components/Sidenav/styles/sidenav';
+
+// Material Dashboard 2 PRO React context
+import {
+  useMaterialUIController,
+  setMiniSidenav,
+  setTransparentSidenav,
+  setWhiteSidenav
+} from 'context';
+
+function Sidenav({ color, brand, brandName, routes, ...rest }) {
+  const [openCollapse, setOpenCollapse] = useState(false);
+  const [openNestedCollapse, setOpenNestedCollapse] = useState(false);
+  const [controller, dispatch] = useMaterialUIController();
+  const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
+  const location = useLocation();
+  const { pathname } = location;
+  const collapseName = pathname.split('/').slice(1)[0];
+  const items = pathname.split('/').slice(1);
+  const itemParentName = items[1];
+  const itemName = items[items.length - 1];
+
+  let textColor = 'white';
+
+  if (transparentSidenav || (whiteSidenav && !darkMode)) {
+    textColor = 'dark';
+  } else if (whiteSidenav && darkMode) {
+    textColor = 'inherit';
+  }
+
+  const closeSidenav = () => setMiniSidenav(dispatch, true);
+
+  useEffect(() => {
+    setOpenCollapse(collapseName);
+    setOpenNestedCollapse(itemParentName);
+  }, []);
+
+  useEffect(() => {
+    // A function that sets the mini state of the sidenav.
+    function handleMiniSidenav() {
+      setMiniSidenav(dispatch, window.innerWidth < 1200);
+      setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav);
+      setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav);
+    }
+
+    /** 
+     The event listener that's calling the handleMiniSidenav function when resizing the window.
+    */
+    window.addEventListener('resize', handleMiniSidenav);
+
+    // Call the handleMiniSidenav function to set the state with the initial value.
+    handleMiniSidenav();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleMiniSidenav);
+  }, [dispatch, location]);
+
+  // Render all the nested collapse items from the routes.js
+  const renderNestedCollapse = (collapse) => {
+    const template = collapse.map(({ name, route, key, href }) =>
+      href ? (
+        <Link
+          key={key}
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          sx={{ textDecoration: 'none' }}
+        >
+          <SidenavItem nested name={name} />
+        </Link>
+      ) : (
+        <NavLink to={route} key={key} sx={{ textDecoration: 'none' }}>
+          <SidenavItem nested name={name} active={route === pathname} />
+        </NavLink>
+      )
+    );
+
+    return template;
+  };
+  // Render the all the collpases from the routes.js
+  const renderCollapse = (collapses) =>
+    collapses.map(({ name, collapse, route, href, key }) => {
+      let returnValue;
+
+      if (collapse) {
+        returnValue = (
+          <SidenavItem
+            key={key}
+            color={color}
+            name={name}
+            active={key === itemParentName ? 'isParent' : false}
+            open={openNestedCollapse === key}
+            onClick={({ currentTarget }) =>
+              openNestedCollapse === key && currentTarget.classList.contains('MuiListItem-root')
+                ? setOpenNestedCollapse(false)
+                : setOpenNestedCollapse(key)
+            }
+          >
+            {renderNestedCollapse(collapse)}
+          </SidenavItem>
+        );
+      } else {
+        returnValue = href ? (
+          <Link
+            href={href}
+            key={key}
+            target="_blank"
+            rel="noreferrer"
+            sx={{ textDecoration: 'none' }}
+          >
+            <SidenavItem color={color} name={name} active={key === itemName} />
+          </Link>
+        ) : (
+          <NavLink to={route} key={key} sx={{ textDecoration: 'none' }}>
+            <SidenavItem color={color} name={name} active={key === itemName} />
+          </NavLink>
+        );
+      }
+      return <SidenavList key={key}>{returnValue}</SidenavList>;
+    });
+
+  // Render all the routes from the routes.js (All the visible items on the Sidenav)
+  const renderRoutes = routes.map(
+    ({ type, name, icon, title, collapse, noCollapse, key, href }) => {
+      let returnValue;
+
+      if (type === 'collapse') {
+        returnValue = href ? (
+          <Link
+            href={href}
+            key={key}
+            target="_blank"
+            rel="noreferrer"
+            sx={{ textDecoration: 'none' }}
+          >
+            <SidenavCollapse
+              name={name}
+              icon={icon}
+              active={key === collapseName}
+              noCollapse={noCollapse}
+            />
+          </Link>
+        ) : (
+          <SidenavCollapse
+            key={key}
+            name={name}
+            icon={icon}
+            active={key === collapseName}
+            open={openCollapse === key}
+            onClick={() => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))}
+          >
+            {collapse ? renderCollapse(collapse) : null}
+          </SidenavCollapse>
+        );
+      } else if (type === 'title') {
+        returnValue = (
+          <MDTypography
+            key={key}
+            color={textColor}
+            display="block"
+            variant="caption"
+            fontWeight="bold"
+            textTransform="uppercase"
+            pl={3}
+            mt={2}
+            mb={1}
+            ml={1}
+          >
+            {title}
+          </MDTypography>
+        );
+      } else if (type === 'divider') {
+        returnValue = (
+          <Divider
+            key={key}
+            light={
+              (!darkMode && !whiteSidenav && !transparentSidenav) ||
+              (darkMode && !transparentSidenav && whiteSidenav)
+            }
+          />
+        );
+      }
+
+      return returnValue;
+    }
+  );
+
+  return (
+    <SidenavRoot
+      {...rest}
+      variant="permanent"
+      ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }}
+    >
+      <MDBox pt={3} pb={1} px={4} textAlign="center">
+        <MDBox
+          display={{ xs: 'block', xl: 'none' }}
+          position="absolute"
+          top={0}
+          right={0}
+          p={1.625}
+          sx={{ cursor: 'pointer' }}
+          onClick={closeSidenav}
+        >
+          <MDTypography variant="h6" color="secondary">
+            <Icon sx={{ fontWeight: 'bold' }}>close</Icon>
+          </MDTypography>
+        </MDBox>
+        <MDBox component={NavLink} to="/" display="flex" alignItems="center">
+          {brand && <MDBox component="img" src={brand} alt="Brand" width="2rem" />}
+          <MDBox
+            width={!brandName && '100%'}
+            sx={(theme) => sidenavLogoLabel(theme, { miniSidenav })}
+          >
+            <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
+              {brandName}
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+      </MDBox>
+      <Divider
+        light={
+          (!darkMode && !whiteSidenav && !transparentSidenav) ||
+          (darkMode && !transparentSidenav && whiteSidenav)
+        }
+      />
+      <List>{renderRoutes}</List>
+    </SidenavRoot>
+  );
+}
+
+// Setting default values for the props of Sidenav
+Sidenav.defaultProps = {
+  color: 'info',
+  brand: ''
+};
+
+// Typechecking props for the Sidenav
+Sidenav.propTypes = {
+  color: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'dark']),
+  brand: PropTypes.string,
+  brandName: PropTypes.string.isRequired,
+  routes: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default Sidenav;

src/components/Sidenav/styles/sidenav.js

@@ -0,0 +1,35 @@
+/**
+=========================================================
+* 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.
+*/
+export default function sidenavLogoLabel(theme, ownerState) {
+  const { functions, transitions, typography, breakpoints } = theme;
+  const { miniSidenav } = ownerState;
+
+  const { pxToRem } = functions;
+  const { fontWeightMedium } = typography;
+
+  return {
+    ml: 0.5,
+    fontWeight: fontWeightMedium,
+    wordSpacing: pxToRem(-1),
+    transition: transitions.create('opacity', {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.standard
+    }),
+
+    [breakpoints.up('xl')]: {
+      opacity: miniSidenav ? 0 : 1
+    }
+  };
+}

src/components/Sidenav/styles/sidenavCollapse.js

@@ -0,0 +1,166 @@
+/**
+=========================================================
+* 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 collapseItem(theme, ownerState) {
+  const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme;
+  const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { white, transparent, dark, grey } = palette;
+  const { md } = boxShadows;
+  const { borderRadius } = borders;
+  const { pxToRem, rgba } = functions;
+
+  return {
+    background: () => {
+      let backgroundValue;
+
+      if (transparentSidenav && darkMode) {
+        backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
+      } else if (transparentSidenav && !darkMode) {
+        backgroundValue = active ? grey[300] : transparent.main;
+      } else if (whiteSidenav) {
+        backgroundValue = active ? grey[200] : transparent.main;
+      } else {
+        backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
+      }
+
+      return backgroundValue;
+    },
+    color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    padding: `${pxToRem(8)} ${pxToRem(16)}`,
+    margin: `${pxToRem(1.5)} ${pxToRem(16)}`,
+    borderRadius: borderRadius.md,
+    cursor: 'pointer',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+    boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : 'none',
+    [breakpoints.up('xl')]: {
+      transition: transitions.create(['box-shadow', 'background-color'], {
+        easing: transitions.easing.easeInOut,
+        duration: transitions.duration.shorter
+      })
+    },
+
+    '&:hover, &:focus': {
+      backgroundColor:
+        transparentSidenav && !darkMode
+          ? grey[300]
+          : rgba(whiteSidenav ? grey[400] : white.main, 0.2)
+    }
+  };
+}
+
+function collapseIconBox(theme, ownerState) {
+  const { palette, transitions, borders, functions } = theme;
+  const { transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { white, dark } = palette;
+  const { borderRadius } = borders;
+  const { pxToRem } = functions;
+
+  return {
+    minWidth: pxToRem(32),
+    minHeight: pxToRem(32),
+    color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
+    borderRadius: borderRadius.md,
+    display: 'grid',
+    placeItems: 'center',
+    transition: transitions.create('margin', {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.standard
+    }),
+
+    '& svg, svg g': {
+      color: transparentSidenav || whiteSidenav ? dark.main : white.main
+    }
+  };
+}
+
+const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({
+  color: active ? white.main : gradients.dark.state
+});
+
+function collapseText(theme, ownerState) {
+  const { typography, transitions, breakpoints, functions } = theme;
+  const { miniSidenav, transparentSidenav, active } = ownerState;
+
+  const { size, fontWeightRegular, fontWeightLight } = typography;
+  const { pxToRem } = functions;
+
+  return {
+    marginLeft: pxToRem(10),
+
+    [breakpoints.up('xl')]: {
+      opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1,
+      maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : '100%',
+      marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10),
+      transition: transitions.create(['opacity', 'margin'], {
+        easing: transitions.easing.easeInOut,
+        duration: transitions.duration.standard
+      })
+    },
+
+    '& span': {
+      fontWeight: active ? fontWeightRegular : fontWeightLight,
+      fontSize: size.sm,
+      lineHeight: 0
+    }
+  };
+}
+
+function collapseArrow(theme, ownerState) {
+  const { palette, typography, transitions, breakpoints, functions } = theme;
+  const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } =
+    ownerState;
+
+  const { white, dark } = palette;
+  const { size } = typography;
+  const { pxToRem, rgba } = functions;
+
+  return {
+    fontSize: `${size.lg} !important`,
+    fontWeight: 700,
+    marginBottom: pxToRem(-1),
+    transform: open ? 'rotate(0)' : 'rotate(-180deg)',
+    color: () => {
+      let colorValue;
+
+      if (transparentSidenav && darkMode) {
+        colorValue = open || active ? white.main : rgba(white.main, 0.25);
+      } else if (transparentSidenav || whiteSidenav) {
+        colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
+      } else {
+        colorValue = open || active ? white.main : rgba(white.main, 0.5);
+      }
+
+      return colorValue;
+    },
+    transition: transitions.create(['color', 'transform', 'opacity'], {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.shorter
+    }),
+
+    [breakpoints.up('xl')]: {
+      display:
+        noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
+          ? 'none !important'
+          : 'block !important'
+    }
+  };
+}
+
+export { collapseItem, collapseIconBox, collapseIcon, collapseText, collapseArrow };

src/components/Sidenav/styles/sidenavItem.js

@@ -0,0 +1,156 @@
+/* eslint-disable prefer-destructuring */
+
+/**
+=========================================================
+* 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 item(theme, ownerState) {
+  const { palette, borders, functions, transitions } = theme;
+  const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { transparent, white, grey } = palette;
+  const { borderRadius } = borders;
+  const { rgba } = functions;
+
+  return {
+    pl: 3,
+    mt: 0.375,
+    mb: 0.3,
+    width: '100%',
+    borderRadius: borderRadius.md,
+    cursor: 'pointer',
+    backgroundColor: () => {
+      let backgroundValue = transparent.main;
+
+      if (
+        (active === 'isParent' && !transparentSidenav && !whiteSidenav) ||
+        (active === 'isParent' && transparentSidenav && darkMode)
+      ) {
+        backgroundValue = rgba(white.main, 0.2);
+      } else if (active === 'isParent' && transparentSidenav) {
+        backgroundValue = grey[300];
+      } else if (active === 'isParent' && whiteSidenav) {
+        backgroundValue = grey[200];
+      } else if (active) {
+        backgroundValue = palette[color].main;
+      }
+
+      return backgroundValue;
+    },
+    transition: transitions.create('background-color', {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.sharp
+    }),
+
+    '&:hover, &:focus': {
+      backgroundColor:
+        !active &&
+        rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2)
+    }
+  };
+}
+
+function itemContent(theme, ownerState) {
+  const { palette, typography, transitions, functions } = theme;
+  const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { white, dark } = palette;
+  const { size, fontWeightRegular, fontWeightLight } = typography;
+  const { pxToRem } = functions;
+
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    padding: `${pxToRem(12)} ${pxToRem(16)}`,
+    marginLeft: pxToRem(18),
+    userSelect: 'none',
+    position: 'relative',
+
+    '& span': {
+      color:
+        ((transparentSidenav && !darkMode) || whiteSidenav) && (active === 'isParent' || !active)
+          ? dark.main
+          : white.main,
+      fontWeight: active ? fontWeightRegular : fontWeightLight,
+      fontSize: size.sm,
+      opacity: miniSidenav ? 0 : 1,
+      transition: transitions.create(['opacity', 'color'], {
+        easing: transitions.easing.easeInOut,
+        duration: transitions.duration.standard
+      })
+    },
+
+    '&::before': {
+      content: `"${name[0]}"`,
+      color:
+        ((transparentSidenav && !darkMode) || whiteSidenav) && (active === 'isParent' || !active)
+          ? dark.main
+          : white.main,
+      fontWeight: fontWeightRegular,
+      display: 'flex',
+      alignItems: 'center',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      left: pxToRem(-15),
+      opacity: 1,
+      borderRadius: '50%',
+      fontSize: size.sm
+    }
+  };
+}
+
+function itemArrow(theme, ownerState) {
+  const { palette, typography, transitions, breakpoints, functions } = theme;
+  const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } =
+    ownerState;
+
+  const { white, dark } = palette;
+  const { size } = typography;
+  const { pxToRem, rgba } = functions;
+
+  return {
+    fontSize: `${size.lg} !important`,
+    fontWeight: 700,
+    marginBottom: pxToRem(-1),
+    transform: open ? 'rotate(0)' : 'rotate(-180deg)',
+    color: () => {
+      let colorValue;
+
+      if (transparentSidenav && darkMode) {
+        colorValue = open || active ? white.main : rgba(white.main, 0.25);
+      } else if (transparentSidenav || whiteSidenav) {
+        colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
+      } else {
+        colorValue = open || active ? white.main : rgba(white.main, 0.5);
+      }
+
+      return colorValue;
+    },
+    transition: transitions.create(['color', 'transform', 'opacity'], {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.shorter
+    }),
+
+    [breakpoints.up('xl')]: {
+      display:
+        noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
+          ? 'none !important'
+          : 'block !important'
+    }
+  };
+}
+
+export { item, itemContent, itemArrow };