Feature - Header, sidebar, buttons, dropdown - wms-7,wms-9,wms-12,wms-20 (#18)

* sidebar and header design completed

* Feature - Button Component

* feature - create component for dropdown

* feature - made changes for style of Dropdown

* Fixed Search Icon import

* Linted

* Removed package lock

* Removed: index page style

* Removed: unused style.css file

Co-authored-by: hiren1212 <hirenpadsala12@gmail.com>
Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/components/Breadcrumbs/index.js

@@ -75,15 +75,7 @@ function Breadcrumbs({ icon, title, route, light }) {
           {title.replace('-', ' ')}
         </MDTypography>
       </MuiBreadcrumbs>
-      <MDTypography
-        noWrap
-        fontWeight="bold"
-        textTransform="capitalize"
-        variant="h6"
-        color={light ? 'white' : 'dark'}
-      >
-        {title.replace('-', ' ')}
-      </MDTypography>
+
     </MDBox>
   );
 }

src/components/Button/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/Button/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/DashboardNavbar/index.js

@@ -14,9 +14,11 @@ Coded by www.creative-tim.com
 */
 
 import { useState, useEffect } from 'react';
+// import Grid from '@mui/material/Grid';
+
 
 // react-router components
-import { useLocation, Link } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 // prop-types is a library for typechecking of props.
 import PropTypes from 'prop-types';
@@ -30,20 +32,23 @@ import Icon from '@mui/material/Icon';
 
 // Material Dashboard 2 PRO React components
 import MDBox from 'components/MDBox';
-import MDInput from 'components/MDInput';
+// 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';
 
+// import InputAdornment from '@mui/material/InputAdornment';
+
+
 // Custom styles for DashboardNavbar
 import {
-  navbar,
-  navbarContainer,
+  // navbar,
+  // navbarContainer,
   navbarRow,
   navbarIconButton,
-  navbarDesktopMenu,
+  // navbarDesktopMenu,
   navbarMobileMenu
 } from 'components/Navbars/DashboardNavbar/styles';
 
@@ -54,6 +59,11 @@ import {
   setMiniSidenav,
   setOpenConfigurator
 } from 'context';
+import SearchBar from 'components/SearchBar';
+import { Box } from '@mui/material';
+
+
+
 
 function DashboardNavbar({ absolute, light, isMini }) {
   const [navbarType, setNavbarType] = useState();
@@ -61,6 +71,7 @@ function DashboardNavbar({ absolute, light, isMini }) {
   const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
   const [openMenu, setOpenMenu] = useState(false);
   const route = useLocation().pathname.split('/').slice(1);
+  
 
   useEffect(() => {
     // Setting the navbar type
@@ -72,7 +83,7 @@ function DashboardNavbar({ absolute, light, isMini }) {
 
     // A function that sets the transparent state of the navbar.
     function handleTransparentNavbar() {
-      setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
+      setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) && !fixedNavbar);
     }
 
     /** 
@@ -124,71 +135,75 @@ function DashboardNavbar({ absolute, light, isMini }) {
       return colorValue;
     }
   });
-
+  
   return (
     <AppBar
       position={absolute ? 'absolute' : navbarType}
+      top={top ? '0' : navbarType}
       color="inherit"
-      sx={(theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode })}
+      className="header"
+      // 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>
+      <Box 
+        sx={{
+          paddingTop: '8px',
+          paddingBottom: '8px',
+          marginBottom: '5px',
+          boxShadow: '0px 1px 4px rgb(0 0 0 / 8%)',
+          width: '100% !important'
+        }}>
+        <Toolbar className="custom-header" >
+          {isMini ? null : (
+          
+            <MDBox display="flex" width="100% !important" max-width="100% !important">
+              <MDBox sx={{ width:'100%',  maxWidth: '100%' }} pr={3}>
+                <SearchBar />
+              </MDBox>
+              <MDBox display="flex" color={light ? 'white' : 'inherit'}>
+                <IconButton
+                  disableRipple
+                  size="small"
+                  color="inherit"
+                  sx={navbarMobileMenu}
+                  onClick={handleMiniSidenav}
+                >
+                  <Icon sx={iconsStyle} fontSize="medium">
+                    {miniSidenav ? 'menu_open' : 'menu'}
+                  </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()}
+                <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>
-          </MDBox>
-        )}
+          )}
+        </Toolbar>
+      </Box> 
+      <Toolbar variant='dense'>
+        <MDBox color="inherit" mb={{ xs: 2, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
+          <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
+        </MDBox>
       </Toolbar>
     </AppBar>
   );
@@ -206,6 +221,7 @@ DashboardNavbar.propTypes = {
   absolute: PropTypes.bool,
   light: PropTypes.bool,
   isMini: PropTypes.bool
+  
 };
 
 export default DashboardNavbar;

src/components/Dropdown/index.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+// import InputLabel from '@mui/material/InputLabel'
+import OutlinedInput from '@mui/material/OutlinedInput';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
+export default function Dropdown() {
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event) => {
+    const {
+      target: { value }
+    } = event;
+    setAge(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value
+    );
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <FormControl sx={{ width: '100%' }}>
+        {/* <InputLabel id="demo-simple-select-label">Equipment</InputLabel> */}
+        <Select
+          displayEmpty
+          input={<OutlinedInput />}
+          value={age}
+          renderValue={(selected) => {
+            if (selected.length === 0) {
+              return <span>Placeholder</span>;
+            }
+
+            return selected;
+          }}
+          inputProps={{ 'aria-label': 'Without label' }}
+          onChange={handleChange}
+        >
+          <MenuItem disabled value="">
+            {' '}
+            <span>Placeholder</span>{' '}
+          </MenuItem>
+          <MenuItem value={'Ten'}>Ten</MenuItem>
+          <MenuItem value={'Twenty'}>Twenty</MenuItem>
+          <MenuItem value={'Thirty'}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

src/components/SearchBar/index.js

@@ -0,0 +1,24 @@
+import { TextField, InputAdornment, SvgIcon } from '@mui/material';
+import Search from 'assets/images/SearchIcon';
+
+function SearchBar() {
+  return (
+    <>
+      <TextField
+        fullWidth
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SvgIcon fontSize="small" color="action">
+                <Search />
+              </SvgIcon>
+            </InputAdornment>
+          )
+        }}
+        placeholder="Search"
+        variant="outlined"
+      />
+    </>
+  );
+}
+export default SearchBar;

src/components/Sidenav/SidenavItem.js

@@ -56,7 +56,7 @@ function SidenavItem({ color, name, active, nested, children, open, ...rest }) {
             })
           }
         >
-          <ListItemText primary={name} />
+          <ListItemText primary={name}  />
           {children && (
             <Icon
               component="i"

src/components/Sidenav/SidenavList.js

@@ -23,8 +23,9 @@ function SidenavList({ children }) {
   return (
     <List
       sx={{
-        px: 2,
-        my: 0.3
+        px: 0,
+        my: 0.3,
+        borderRadius: 'none'
       }}
     >
       {children}

src/components/Sidenav/SidenavRoot.js

@@ -21,20 +21,21 @@ 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 sidebarWidth = 280;
+  const { transparent, sidenavcolor, white, background } = palette;
   const { xxl } = boxShadows;
-  const { pxToRem, linearGradient } = functions;
+  const { pxToRem } = functions;
 
   let backgroundValue = darkMode
     ? background.sidenav
-    : linearGradient(gradients.dark.main, gradients.dark.state);
+    : sidenavcolor.main;
 
   if (transparentSidenav) {
     backgroundValue = transparent.main;
   } else if (whiteSidenav) {
     backgroundValue = white.main;
   }
+  
 
   // styles for the sidenav when miniSidenav={false}
   const drawerOpenStyles = () => ({
@@ -71,7 +72,7 @@ export default styled(Drawer)(({ theme, ownerState }) => {
       boxShadow: transparentSidenav ? 'none' : xxl,
       marginBottom: transparentSidenav ? 0 : 'inherit',
       left: '0',
-      width: pxToRem(96),
+      width: pxToRem(65),
       overflowX: 'hidden',
       transform: 'translateX(0)',
       transition: transitions.create(['width', 'background-color'], {

src/components/Sidenav/index.js

@@ -48,7 +48,7 @@ import {
   setWhiteSidenav
 } from 'context';
 
-function Sidenav({ color, brand, brandName, routes, ...rest }) {
+function Sidenav({ color, brandName, routes, ...rest }) {
   const [openCollapse, setOpenCollapse] = useState(false);
   const [openNestedCollapse, setOpenNestedCollapse] = useState(false);
   const [controller, dispatch] = useMaterialUIController();
@@ -59,6 +59,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
   const items = pathname.split('/').slice(1);
   const itemParentName = items[1];
   const itemName = items[items.length - 1];
+  
 
   let textColor = 'white';
 
@@ -231,7 +232,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
       variant="permanent"
       ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }}
     >
-      <MDBox pt={3} pb={1} px={4} textAlign="center">
+      <MDBox pt={3} pb={3} px={2} textAlign="center">
         <MDBox
           display={{ xs: 'block', xl: 'none' }}
           position="absolute"
@@ -246,23 +247,22 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
           </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}>
+            <MDTypography fontSize="2rem"  component="h1" variant="button" fontWeight="bold"  color={textColor}>
               {brandName}
             </MDTypography>
           </MDBox>
         </MDBox>
       </MDBox>
-      <Divider
+      {/* <Divider
         light={
           (!darkMode && !whiteSidenav && !transparentSidenav) ||
           (darkMode && !transparentSidenav && whiteSidenav)
         }
-      />
+      /> */}
       <List>{renderRoutes}</List>
     </SidenavRoot>
   );

src/components/Sidenav/styles/sidenavCollapse.js

@@ -13,12 +13,12 @@ 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 { palette, transitions, breakpoints, boxShadows, functions } = theme;
   const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
 
   const { white, transparent, dark, grey } = palette;
   const { md } = boxShadows;
-  const { borderRadius } = borders;
+  // const { borderRadius } = borders;
   const { pxToRem, rgba } = functions;
 
   return {
@@ -41,9 +41,9 @@ function collapseItem(theme, ownerState) {
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    padding: `${pxToRem(8)} ${pxToRem(16)}`,
-    margin: `${pxToRem(1.5)} ${pxToRem(16)}`,
-    borderRadius: borderRadius.md,
+    padding: `${pxToRem(1.6)} ${pxToRem(14)}`,
+    margin: `${pxToRem(1.5)} ${pxToRem(0)}`,
+    borderRadius:'none',
     cursor: 'pointer',
     userSelect: 'none',
     whiteSpace: 'nowrap',
@@ -96,9 +96,9 @@ const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({
 
 function collapseText(theme, ownerState) {
   const { typography, transitions, breakpoints, functions } = theme;
-  const { miniSidenav, transparentSidenav, active } = ownerState;
+  const { miniSidenav, transparentSidenav } = ownerState;
 
-  const { size, fontWeightRegular, fontWeightLight } = typography;
+  const { size, fontWeightRegular } = typography;
   const { pxToRem } = functions;
 
   return {
@@ -115,7 +115,7 @@ function collapseText(theme, ownerState) {
     },
 
     '& span': {
-      fontWeight: active ? fontWeightRegular : fontWeightLight,
+      fontWeight: fontWeightRegular,
       fontSize: size.sm,
       lineHeight: 0
     }

src/components/Sidenav/styles/sidenavItem.js

@@ -15,19 +15,19 @@ 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 { palette, functions, transitions } = theme;
   const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState;
 
   const { transparent, white, grey } = palette;
-  const { borderRadius } = borders;
+  // const { borderRadius } = borders;
   const { rgba } = functions;
 
   return {
-    pl: 3,
+    pl: 4.5,
     mt: 0.375,
     mb: 0.3,
     width: '100%',
-    borderRadius: borderRadius.md,
+    borderRadius: 'none',
     cursor: 'pointer',
     backgroundColor: () => {
       let backgroundValue = transparent.main;
@@ -73,8 +73,8 @@ function itemContent(theme, ownerState) {
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    padding: `${pxToRem(12)} ${pxToRem(16)}`,
-    marginLeft: pxToRem(18),
+    padding: `${pxToRem(7)} ${pxToRem(0)}`,
+    marginLeft: pxToRem(20),
     userSelect: 'none',
     position: 'relative',
 
@@ -104,9 +104,9 @@ function itemContent(theme, ownerState) {
       position: 'absolute',
       top: '50%',
       transform: 'translateY(-50%)',
-      left: pxToRem(-15),
+      left: pxToRem(-25),
       opacity: 1,
-      borderRadius: '50%',
+      borderRadius: 'none',
       fontSize: size.sm
     }
   };