diff --git a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2.js b/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2.js
deleted file mode 100644
index 3ea9cb1..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import Hidden from '@mui/material/Hidden';
-import { styled } from '@mui/material/styles';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import {
- navbarCloseFolded,
- navbarCloseMobile,
- navbarOpenFolded,
- selectFuseNavbar,
-} from 'app/store/fuse/navbarSlice';
-import { useDispatch, useSelector } from 'react-redux';
-import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
-import NavbarStyle2Content from './NavbarStyle2Content';
-
-const navbarWidth = 280;
-
-const Root = styled('div')(({ theme, folded }) => ({
- display: 'flex',
- flexDirection: 'column',
- zIndex: 4,
- [theme.breakpoints.up('lg')]: {
- width: navbarWidth,
- minWidth: navbarWidth,
- },
-
- ...(folded && {
- [theme.breakpoints.up('lg')]: {
- width: 76,
- minWidth: 76,
- },
- }),
-}));
-
-const StyledNavbar = styled('div')(
- ({ theme, position, folded, foldedandopened, foldedandclosed }) => ({
- minWidth: navbarWidth,
- width: navbarWidth,
- maxWidth: navbarWidth,
- maxHeight: '100%',
- transition: theme.transitions.create(['width', 'min-width'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.shorter,
- }),
-
- ...(position === 'left' && {
- left: 0,
- }),
-
- ...(position === 'right' && {
- right: 0,
- }),
-
- ...(folded && {
- position: 'absolute',
- width: 76,
- minWidth: 76,
- top: 0,
- bottom: 0,
- }),
-
- ...(foldedandopened && {
- width: navbarWidth,
- minWidth: navbarWidth,
- }),
-
- ...(foldedandclosed && {
- '& .NavbarStyle2-content': {
- '& .logo-icon': {
- width: 44,
- height: 44,
- },
- '& .logo-text': {
- opacity: 0,
- },
- '& .react-badge': {
- opacity: 0,
- },
- '& .fuse-list-item': {
- width: 56,
- },
- '& .fuse-list-item-text, & .arrow-icon, & .item-badge': {
- opacity: 0,
- },
- '& .fuse-list-subheader .fuse-list-subheader-text': {
- opacity: 0,
- },
- '& .fuse-list-subheader:before': {
- content: '""',
- display: 'block',
- position: 'absolute',
- minWidth: 16,
- borderTop: '2px solid',
- opacity: 0.2,
- },
- '& .collapse-children': {
- display: 'none',
- },
- },
- }),
- })
-);
-
-const StyledNavbarMobile = styled(SwipeableDrawer)(({ theme, position }) => ({
- '& > .MuiDrawer-paper': {
- minWidth: navbarWidth,
- width: navbarWidth,
- maxWidth: navbarWidth,
- maxHeight: '100%',
- transition: theme.transitions.create(['width', 'min-width'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.shorter,
- }),
- },
-}));
-
-function NavbarStyle2(props) {
- const dispatch = useDispatch();
- const config = useSelector(selectFuseCurrentLayoutConfig);
- const navbar = useSelector(selectFuseNavbar);
-
- // const folded = !navbar.open;
- const { folded } = config.navbar;
- const foldedandclosed = folded && !navbar.foldedOpen;
- const foldedandopened = folded && navbar.foldedOpen;
-
- return (
-
-
- foldedandclosed && dispatch(navbarOpenFolded())}
- onMouseLeave={() => foldedandopened && dispatch(navbarCloseFolded())}
- >
-
-
-
-
-
- dispatch(navbarCloseMobile())}
- onOpen={() => {}}
- disableSwipeToOpen
- ModalProps={{
- keepMounted: true, // Better open performance on mobile.
- }}
- >
-
-
-
-
- );
-}
-
-export default NavbarStyle2;
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2Content.js b/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2Content.js
deleted file mode 100644
index 493ca6d..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2Content.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import FuseScrollbars from '@fuse/core/FuseScrollbars';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { memo } from 'react';
-import Logo from '../../../../shared-components/Logo';
-import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
-import Navigation from '../../../../shared-components/Navigation';
-
-const Root = styled('div')(({ theme }) => ({
- backgroundColor: theme.palette.background.default,
- color: theme.palette.text.primary,
- '& ::-webkit-scrollbar-thumb': {
- boxShadow: `inset 0 0 0 20px ${
- theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.24)' : 'rgba(255, 255, 255, 0.24)'
- }`,
- },
- '& ::-webkit-scrollbar-thumb:active': {
- boxShadow: `inset 0 0 0 20px ${
- theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.37)' : 'rgba(255, 255, 255, 0.37)'
- }`,
- },
-}));
-
-const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
- overscrollBehavior: 'contain',
- overflowX: 'hidden',
- overflowY: 'auto',
- WebkitOverflowScrolling: 'touch',
- background:
- 'linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%)',
- backgroundRepeat: 'no-repeat',
- backgroundSize: '100% 40px, 100% 10px',
- backgroundAttachment: 'local, scroll',
-}));
-
-function NavbarStyle2Content(props) {
- return (
-
-
-
-
-
-
-
- );
-}
-
-export default memo(NavbarStyle2Content);
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js b/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js
deleted file mode 100644
index 07fcac9..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import Hidden from '@mui/material/Hidden';
-import { styled } from '@mui/material/styles';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import { useDispatch, useSelector } from 'react-redux';
-import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
-import GlobalStyles from '@mui/material/GlobalStyles';
-import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
-import NavbarStyle3Content from './NavbarStyle3Content';
-
-const navbarWidth = 120;
-const navbarWidthDense = 64;
-const panelWidth = 280;
-
-const StyledNavBar = styled('div')(({ theme, dense, open, folded, position }) => ({
- minWidth: navbarWidth,
- width: navbarWidth,
- maxWidth: navbarWidth,
-
- ...(dense && {
- minWidth: navbarWidthDense,
- width: navbarWidthDense,
- maxWidth: navbarWidthDense,
-
- ...(!open && {
- ...(position === 'left' && {
- marginLeft: -navbarWidthDense,
- }),
-
- ...(position === 'right' && {
- marginRight: -navbarWidthDense,
- }),
- }),
- }),
-
- ...(!folded && {
- minWidth: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
- width: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
- maxWidth: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
-
- '& #fuse-navbar-panel': {
- opacity: '1!important',
- pointerEvents: 'initial!important',
- },
-
- ...(!open && {
- ...(position === 'left' && {
- marginLeft: -(dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth),
- }),
-
- ...(position === 'right' && {
- marginRight: -(dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth),
- }),
- }),
- }),
-
- ...(!open && {
- transition: theme.transitions.create('margin', {
- easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.leavingScreen,
- }),
- ...(position === 'left' && {
- marginLeft: -(dense ? navbarWidthDense : navbarWidth),
- }),
-
- ...(position === 'right' && {
- marginRight: -(dense ? navbarWidthDense : navbarWidth),
- }),
- }),
-
- ...(open && {
- transition: theme.transitions.create('margin', {
- easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.enteringScreen,
- }),
- }),
-}));
-
-const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
- '& .MuiDrawer-paper': {
- '& #fuse-navbar-side-panel': {
- minWidth: 'auto',
- wdith: 'auto',
- },
- '& #fuse-navbar-panel': {
- opacity: '1!important',
- pointerEvents: 'initial!important',
- },
- },
-}));
-
-function NavbarStyle3(props) {
- const dispatch = useDispatch();
- const config = useSelector(selectFuseCurrentLayoutConfig);
- const navbar = useSelector(selectFuseNavbar);
- const { folded } = config.navbar;
-
- return (
- <>
- ({
- '& #fuse-navbar-side-panel': {
- width: props.dense ? navbarWidthDense : navbarWidth,
- minWidth: props.dense ? navbarWidthDense : navbarWidth,
- maxWidth: props.dense ? navbarWidthDense : navbarWidth,
- },
- '& #fuse-navbar-panel': {
- maxWidth: '100%',
- width: panelWidth,
- [theme.breakpoints.up('lg')]: {
- minWidth: panelWidth,
- maxWidth: 'initial',
- },
- },
- })}
- />
-
-
-
-
-
-
- dispatch(navbarCloseMobile())}
- onOpen={() => {}}
- disableSwipeToOpen
- ModalProps={{
- keepMounted: true, // Better open performance on mobile.
- }}
- >
-
-
-
-
- );
-}
-
-export default NavbarStyle3;
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3Content.js b/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3Content.js
deleted file mode 100644
index 651b534..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3Content.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import FuseScrollbars from '@fuse/core/FuseScrollbars';
-import { styled, useTheme } from '@mui/material/styles';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import clsx from 'clsx';
-import { memo, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import FuseNavigation from '@fuse/core/FuseNavigation';
-import { navbarCloseMobile } from 'app/store/fuse/navbarSlice';
-import { selectContrastMainTheme } from 'app/store/fuse/settingsSlice';
-import { useLocation } from 'react-router-dom';
-import useThemeMediaQuery from '@fuse/hooks/useThemeMediaQuery';
-import { selectNavigation } from 'app/store/fuse/navigationSlice';
-
-const Root = styled('div')(({ theme }) => ({
- backgroundColor: theme.palette.background.default,
- color: theme.palette.text.primary,
-}));
-
-const StyledPanel = styled(FuseScrollbars)(({ theme, opened }) => ({
- backgroundColor: theme.palette.background.default,
- color: theme.palette.text.primary,
- transition: theme.transitions.create(['opacity'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.shortest,
- }),
- opacity: 0,
- pointerEvents: 'none',
- ...(opened && {
- opacity: 1,
- pointerEvents: 'initial',
- }),
-}));
-
-function needsToBeOpened(location, item) {
- return location && isUrlInChildren(item, location.pathname);
-}
-
-function isUrlInChildren(parent, url) {
- if (!parent.children) {
- return false;
- }
-
- for (let i = 0; i < parent.children.length; i += 1) {
- if (parent.children[i].children) {
- if (isUrlInChildren(parent.children[i], url)) {
- return true;
- }
- }
- if (parent.children[i].url === url || url.includes(parent.children[i].url)) {
- return true;
- }
- }
-
- return false;
-}
-
-function NavbarStyle3Content(props) {
- const isMobile = useThemeMediaQuery((theme) => theme.breakpoints.down('lg'));
- const navigation = useSelector(selectNavigation);
- const [selectedNavigation, setSelectedNavigation] = useState([]);
- const [panelOpen, setPanelOpen] = useState(false);
- const theme = useTheme();
- const dispatch = useDispatch();
- const contrastTheme = useSelector(selectContrastMainTheme(theme.palette.primary.main));
- const location = useLocation();
-
- useEffect(() => {
- navigation?.forEach((item) => {
- if (needsToBeOpened(location, item)) {
- setSelectedNavigation([item]);
- }
- });
- }, [navigation, location]);
-
- function handleParentItemClick(selected) {
- /** if there is no child item do not set/open panel
- */
- if (!selected.children) {
- setSelectedNavigation([]);
- setPanelOpen(false);
- return;
- }
-
- /**
- * If navigation already selected toggle panel visibility
- */
- if (selectedNavigation[0]?.id === selected.id) {
- setPanelOpen(!panelOpen);
- } else {
- /**
- * Set navigation and open panel
- */
- setSelectedNavigation([selected]);
- setPanelOpen(true);
- }
- }
-
- function handleChildItemClick(selected) {
- setPanelOpen(false);
- if (isMobile) {
- dispatch(navbarCloseMobile());
- }
- }
-
- return (
- setPanelOpen(false)}>
-
-
-
-
-
-
-
-