77 lines
1.7 KiB
React
77 lines
1.7 KiB
React
import React from 'react';
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import {
|
|
AppBar,
|
|
Toolbar,
|
|
CssBaseline,
|
|
Typography,
|
|
Breadcrumbs,
|
|
Link as MaterialLink,
|
|
Grid,
|
|
IconButton,
|
|
} from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import ThreeSixtyOutlinedIcon from '@mui/icons-material/ThreeSixtyOutlined';
|
|
|
|
import DarkModeToggle from 'layouts/common/darkModeToggle';
|
|
import HideOnScroll from 'layouts/common/hideOnScroll';
|
|
|
|
const Header = () => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<>
|
|
<CssBaseline />
|
|
<HideOnScroll>
|
|
<AppBar
|
|
position='fixed'
|
|
sx={{
|
|
background: 'transparent',
|
|
zIndex: 1301,
|
|
[theme.breakpoints.down('lg')]: {
|
|
backgroundColor: theme.palette.background.default,
|
|
},
|
|
}}
|
|
elevation={0}>
|
|
<Toolbar>
|
|
<Grid container justifyContent='space-between' alignItems='center'>
|
|
<Grid item>
|
|
<Breadcrumbs aria-label='breadcrumb'>
|
|
<Typography
|
|
variant='h5'
|
|
sx={{
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '.2rem',
|
|
}}>
|
|
Dan Dobos
|
|
</Typography>
|
|
|
|
<MaterialLink
|
|
color='textPrimary'
|
|
href='#about'
|
|
style={{ cursor: 'pointer' }}>
|
|
About
|
|
</MaterialLink>
|
|
</Breadcrumbs>
|
|
</Grid>
|
|
<Grid item>
|
|
<Grid container alignItems='center'>
|
|
<Link to='/projects'>
|
|
<IconButton disableRipple sx={{ mr: 1 }}>
|
|
<ThreeSixtyOutlinedIcon />
|
|
</IconButton>
|
|
</Link>
|
|
<DarkModeToggle />
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Toolbar>
|
|
</AppBar>
|
|
</HideOnScroll>
|
|
</>
|
|
);
|
|
};
|
|
export default Header;
|