Socialvoid-React/components/Header.tsx

41 lines
1.1 KiB
TypeScript

import AppBar from '@mui/material/AppBar'
import Container from '@mui/material/Container'
import Paper from '@mui/material/Paper'
import Slide from '@mui/material/Slide'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import useScrollTrigger from '@mui/material/useScrollTrigger'
export default function Header() {
const trigger = useScrollTrigger()
return (
<Slide appear={false} direction="down" in={!trigger}>
<Paper
component="header"
variant="outlined"
sx={{
borderTop: 'none',
borderRight: 'none',
borderLeft: 'none',
userSelect: 'none',
}}
>
<Container maxWidth="sm">
<AppBar
position="sticky"
color="transparent"
sx={{ boxShadow: 'none' }}
>
<Toolbar>
<Typography variant="h6" component="div">
Socialvoid
</Typography>
</Toolbar>
</AppBar>
</Container>
</Paper>
</Slide>
)
}