50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { Link as RouterLink } from 'react-router-dom'
|
|
import { AppBar, Button, Stack, Toolbar, Typography, styled } from '@mui/material'
|
|
|
|
const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
|
|
textTransform: 'none',
|
|
color: 'inherit',
|
|
':hover': {
|
|
backgroundColor: 'transparent',
|
|
color: theme.palette.primary.main,
|
|
},
|
|
}))
|
|
|
|
const CustomToobar = () => {
|
|
return (
|
|
<AppBar
|
|
sx={{
|
|
backgroundColor: theme => (theme.palette.mode === 'dark' ? 'transparent' : undefined),
|
|
}}>
|
|
<Toolbar>
|
|
<AppBarButton component={RouterLink} to="/" sx={{ mr: 'auto' }}>
|
|
<Typography variant="h5">Michele Tartari</Typography>
|
|
</AppBarButton>
|
|
<Stack direction="row" spacing={2} sx={{ display: { xs: 'none', md: 'flex' } }}>
|
|
<AppBarButton component={RouterLink} to="/">
|
|
<Typography variant="h6">Home</Typography>
|
|
</AppBarButton>
|
|
<AppBarButton component={RouterLink} to="/projects">
|
|
<Typography variant="h6">Projects</Typography>
|
|
</AppBarButton>
|
|
<AppBarButton component={RouterLink} to="/curriculum">
|
|
<Typography variant="h6">Curriculum</Typography>
|
|
</AppBarButton>
|
|
<Button
|
|
component={RouterLink}
|
|
to="/contacts"
|
|
color="primary"
|
|
variant="contained"
|
|
sx={{
|
|
textTransform: 'none',
|
|
}}>
|
|
<Typography variant="h6">Hire me</Typography>
|
|
</Button>
|
|
</Stack>
|
|
</Toolbar>
|
|
</AppBar>
|
|
)
|
|
}
|
|
|
|
export default CustomToobar
|