150 lines
4.4 KiB
JavaScript
150 lines
4.4 KiB
JavaScript
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;
|