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-2/NavbarStyle2.js
+++ b/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2.js
@@ -0,0 +1,171 @@
+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 (
+    <Root
+      folded={folded ? 1 : 0}
+      open={navbar.open}
+      id="fuse-navbar"
+      className="sticky top-0 h-screen shrink-0 z-20 shadow-5"
+    >
+      <Hidden lgDown>
+        <StyledNavbar
+          className="flex-col flex-auto"
+          position={config.navbar.position}
+          folded={folded ? 1 : 0}
+          foldedandopened={foldedandopened ? 1 : 0}
+          foldedandclosed={foldedandclosed ? 1 : 0}
+          onMouseEnter={() => foldedandclosed && dispatch(navbarOpenFolded())}
+          onMouseLeave={() => foldedandopened && dispatch(navbarCloseFolded())}
+        >
+          <NavbarStyle2Content className="NavbarStyle2-content" />
+        </StyledNavbar>
+      </Hidden>
+
+      <Hidden lgUp>
+        <StyledNavbarMobile
+          classes={{
+            paper: 'flex-col flex-auto h-full',
+          }}
+          folded={folded ? 1 : 0}
+          foldedandopened={foldedandopened ? 1 : 0}
+          foldedandclosed={foldedandclosed ? 1 : 0}
+          anchor={config.navbar.position}
+          variant="temporary"
+          open={navbar.mobileOpen}
+          onClose={() => dispatch(navbarCloseMobile())}
+          onOpen={() => {}}
+          disableSwipeToOpen
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+        >
+          <NavbarStyle2Content className="NavbarStyle2-content" />
+        </StyledNavbarMobile>
+      </Hidden>
+    </Root>
+  );
+}
+
+export default NavbarStyle2;