init: add fuse-react v8.3.5 skeleton

src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js

@@ -0,0 +1,149 @@
+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 (
+    <>
+      <GlobalStyles
+        styles={(theme) => ({
+          '& #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',
+            },
+          },
+        })}
+      />
+      <Hidden lgDown>
+        <StyledNavBar
+          open={navbar.open}
+          dense={props.dense ? 1 : 0}
+          folded={folded ? 1 : 0}
+          position={config.navbar.position}
+          className="flex-col flex-auto sticky top-0 h-screen shrink-0 z-20 shadow-5"
+        >
+          <NavbarStyle3Content dense={props.dense ? 1 : 0} folded={folded ? 1 : 0} />
+        </StyledNavBar>
+      </Hidden>
+      <Hidden lgUp>
+        <StyledNavBarMobile
+          classes={{
+            paper: 'flex-col flex-auto h-screen max-w-full w-auto overflow-hidden',
+          }}
+          anchor={config.navbar.position}
+          variant="temporary"
+          open={navbar.mobileOpen}
+          onClose={() => dispatch(navbarCloseMobile())}
+          onOpen={() => {}}
+          disableSwipeToOpen
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+        >
+          <NavbarStyle3Content dense={props.dense ? 1 : 0} folded={folded ? 1 : 0} />
+        </StyledNavBarMobile>
+      </Hidden>
+    </>
+  );
+}
+
+export default NavbarStyle3;

src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3Content.js

@@ -0,0 +1,147 @@
+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 (
+    <ClickAwayListener onClickAway={() => setPanelOpen(false)}>
+      <Root className={clsx('flex flex-auto flex h-full', props.className)}>
+        <div id="fuse-navbar-side-panel" className="flex shrink-0 flex-col items-center">
+          <img className="w-44 my-32" src="assets/images/logo/logo.svg" alt="logo" />
+
+          <FuseScrollbars
+            className="flex flex-1 min-h-0 justify-center w-full overflow-y-auto overflow-x-hidden"
+            option={{ suppressScrollX: true, wheelPropagation: false }}
+          >
+            <FuseNavigation
+              className={clsx('navigation')}
+              navigation={navigation}
+              layout="vertical-2"
+              onItemClick={handleParentItemClick}
+              firstLevel
+              selectedId={selectedNavigation[0]?.id}
+              dense={props.dense}
+            />
+          </FuseScrollbars>
+        </div>
+
+        {selectedNavigation.length > 0 && (
+          <StyledPanel
+            id="fuse-navbar-panel"
+            opened={panelOpen}
+            className={clsx('shadow-5 overflow-y-auto overflow-x-hidden')}
+            option={{ suppressScrollX: true, wheelPropagation: false }}
+          >
+            <FuseNavigation
+              className={clsx('navigation')}
+              navigation={selectedNavigation}
+              layout="vertical"
+              onItemClick={handleChildItemClick}
+            />
+          </StyledPanel>
+        )}
+      </Root>
+    </ClickAwayListener>
+  );
+}
+
+export default memo(NavbarStyle3Content);