init: add fuse-react v8.3.5 skeleton

2023-05-30 21:07:44 +01:00
commit 3a760d2646
543 changed files with 102541 additions and 0 deletions
--- a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js
+++ b/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;