File size: 1,752 Bytes
95b5a04 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import PropTypes from 'prop-types';
import { cloneElement } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import AppBar from '@mui/material/AppBar';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
// project imports
import MenuList from './MenuList';
import useConfig from 'hooks/useConfig';
function ElevationScroll({ children, window }) {
const theme = useTheme();
/**
* Note that you normally won't need to set the window ref as useScrollTrigger will default to window.
* This is only being set here because the demo is in an iframe.
*/
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: window
});
theme.shadows[4] = theme.vars.customShadows.z1;
return cloneElement(children, {
elevation: trigger ? 4 : 0
});
}
// ==============================|| HORIZONTAL MENU LIST ||============================== //
export default function HorizontalBar() {
const {
state: { container }
} = useConfig();
return (
<ElevationScroll>
<AppBar
sx={(theme) => ({
top: 71,
bgcolor: 'background.paper',
width: '100%',
height: 62,
justifyContent: 'center',
borderTop: '1px solid',
borderColor: 'grey.300',
zIndex: 1098
})}
>
<Container maxWidth={container ? 'lg' : false}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<MenuList />
</Box>
</Container>
</AppBar>
</ElevationScroll>
);
}
ElevationScroll.propTypes = { children: PropTypes.node, window: PropTypes.any };
|