005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import GlobalStyles from '@mui/joy/GlobalStyles';
|
|
import IconButton from '@mui/joy/IconButton';
|
|
import Sheet from '@mui/joy/Sheet';
|
|
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
|
|
import { toggleSidebar } from '../utils';
|
|
|
|
export default function Header() {
|
|
return (
|
|
<Sheet
|
|
sx={{
|
|
display: { xs: 'flex', md: 'none' },
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
position: 'fixed',
|
|
top: 0,
|
|
width: '100vw',
|
|
height: 'var(--Header-height)',
|
|
zIndex: 9998,
|
|
p: 2,
|
|
gap: 1,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'background.level1',
|
|
boxShadow: 'sm',
|
|
}}
|
|
>
|
|
<GlobalStyles
|
|
styles={(theme) => ({
|
|
':root': {
|
|
'--Header-height': '52px',
|
|
[theme.breakpoints.up('md')]: {
|
|
'--Header-height': '0px',
|
|
},
|
|
},
|
|
})}
|
|
/>
|
|
<IconButton
|
|
onClick={() => toggleSidebar()}
|
|
variant="outlined"
|
|
color="neutral"
|
|
size="sm"
|
|
>
|
|
<MenuRoundedIcon />
|
|
</IconButton>
|
|
</Sheet>
|
|
);
|
|
}
|