updated dependencies
This commit is contained in:
Dan Dobos
@@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Container } from '@material-ui/core';
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import Header from './components/header';
|
||||
import Footer from './components/footer';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
container: {
|
||||
minHeight: 'calc(100vh-128px)',
|
||||
paddingTop: '2rem',
|
||||
paddingBottom: '2rem',
|
||||
// flex: 1,
|
||||
fallbacks: [
|
||||
{ minHeight: '-moz-calc(100% - 128px)' },
|
||||
{ minHeight: '-webkit-calc(100% - 128px)' },
|
||||
{ minHeight: '-o-calc(100% - 128px)' },
|
||||
],
|
||||
},
|
||||
}));
|
||||
|
||||
const Main = (props) => {
|
||||
const { children } = props;
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Header />
|
||||
<Container className={classes.container}>{children}</Container>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
|
||||
import Header from './components/header';
|
||||
import Footer from './components/footer';
|
||||
import FullScreenContainer from 'layouts/common/fullScreenContainer';
|
||||
|
||||
const MainLayout = (props) => {
|
||||
const { children } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<Header />
|
||||
<FullScreenContainer>{children}</FullScreenContainer>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainLayout;
|
||||
@@ -1,23 +1,30 @@
|
||||
import React from 'react';
|
||||
import {Grid, Typography } from '@material-ui/core';
|
||||
import { Grid, Typography } from '@mui/material';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
zIndex: 1300,
|
||||
}}
|
||||
justify="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography inline="true" variant="body1">
|
||||
Dan Dobos © 2021 Build with passion
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
const getCurrentYear = () => {
|
||||
return new Date().getFullYear();
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
marginTop: 'auto',
|
||||
zIndex: 1300,
|
||||
minHeight: '24px',
|
||||
}}
|
||||
justifyContent='center'>
|
||||
<Grid item>
|
||||
<Typography
|
||||
inline='true'
|
||||
variant='body1'
|
||||
fontFamily='Nanum Gothic Coding'>
|
||||
Dan Dobos © {getCurrentYear()} Build with passion
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -1,31 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
import { AppBar, Toolbar, CssBaseline } from '@material-ui/core';
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import HideOnScroll from '../../../../common/hideOnScroll'
|
||||
import { AppBar, Toolbar, CssBaseline, Box } from '@mui/material';
|
||||
|
||||
import DarkModeToogle from 'layouts/common/darkModeToogle';
|
||||
import HideOnScroll from 'layouts/common/hideOnScroll';
|
||||
import Navigation from './navigation';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
appBar: {
|
||||
position: 'fixed',
|
||||
zIndex: 1301,
|
||||
},
|
||||
}));
|
||||
|
||||
const Header = () => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<HideOnScroll>
|
||||
<AppBar className={classes.appBar} elevation={0}>
|
||||
<Toolbar>
|
||||
<Navigation />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</HideOnScroll>
|
||||
<Toolbar />
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<HideOnScroll>
|
||||
<AppBar sx={{ position: 'fixed', zIndex: 1301 }} elevation={0}>
|
||||
<Toolbar>
|
||||
<Navigation />
|
||||
<Box sx={{ display: { sm: 'block', xs: 'none' } }}>
|
||||
<DarkModeToogle />
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</HideOnScroll>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
|
||||
@@ -1,199 +1,194 @@
|
||||
import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Container,
|
||||
Hidden,
|
||||
Tabs,
|
||||
Tab,
|
||||
useMediaQuery,
|
||||
IconButton,
|
||||
SwipeableDrawer,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
List,
|
||||
} from '@material-ui/core';
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import MenuOpenIcon from '@material-ui/icons/MenuOpen';
|
||||
import { makeStyles, useTheme } from '@material-ui/styles';
|
||||
Container,
|
||||
Tabs,
|
||||
Tab,
|
||||
useMediaQuery,
|
||||
IconButton,
|
||||
SwipeableDrawer,
|
||||
Paper,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
List,
|
||||
} from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import MenuOpenIcon from '@mui/icons-material/MenuOpen';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
toolbar: theme.mixins.toolbar,
|
||||
import DarkModeToogle from 'layouts/common/darkModeToogle';
|
||||
|
||||
drawerIconContainer: {
|
||||
alignSelf: 'center',
|
||||
'&:hover': { backgroundColor: 'transparent' },
|
||||
[theme.breakpoints.down('md')]: { padding: 0 },
|
||||
},
|
||||
drawerIcon: {
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
drawer: {
|
||||
minWidth: '60vw',
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
listitems: {
|
||||
padding: '1.5rem 2rem ',
|
||||
color: theme.palette.primary.main,
|
||||
width: '100%',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
listText: {
|
||||
alignItems: 'flex-start',
|
||||
fontSize: '1.5rem',
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
selected: {
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}));
|
||||
const Navigation = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
const Navigation = (props) => {
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
const matches = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const iOS =
|
||||
typeof navigator !== 'undefined' &&
|
||||
/iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
|
||||
const matches = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
const [value, setValue] = useState(1);
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
const [value, setValue] = useState(1);
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
|
||||
const tabsActions = useRef(null);
|
||||
|
||||
const tabsActions = useRef(null);
|
||||
const wrapper = createRef();
|
||||
|
||||
const handleTabsChange = (e, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
const handleTabsChange = (e, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
setOpenDrawer(true);
|
||||
};
|
||||
const close = () => {
|
||||
setOpenDrawer(false);
|
||||
};
|
||||
const wrapper = createRef();
|
||||
const routes = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: 'Home',
|
||||
link: '/',
|
||||
activeIndex: 0,
|
||||
},
|
||||
{
|
||||
name: 'Projects',
|
||||
link: '/projects',
|
||||
activeIndex: 1,
|
||||
},
|
||||
{
|
||||
name: 'Games',
|
||||
link: '/games',
|
||||
activeIndex: 2,
|
||||
},
|
||||
{
|
||||
name: 'Best Practices',
|
||||
link: '/best-practices',
|
||||
activeIndex: 3,
|
||||
},
|
||||
{
|
||||
name: 'About',
|
||||
link: '/about',
|
||||
activeIndex: 4,
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const routes = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: 'Home',
|
||||
link: '/',
|
||||
activeIndex: 0,
|
||||
},
|
||||
{
|
||||
name: 'Projects',
|
||||
link: '/projects',
|
||||
activeIndex: 1,
|
||||
},
|
||||
{
|
||||
name: 'Games',
|
||||
link: '/games',
|
||||
activeIndex: 2,
|
||||
},
|
||||
{
|
||||
name: 'Snippets',
|
||||
link: '/snippets',
|
||||
activeIndex: 3,
|
||||
},
|
||||
{
|
||||
name: 'About',
|
||||
link: '/about',
|
||||
activeIndex: 4,
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
useEffect(() => {
|
||||
routes.forEach((route) => {
|
||||
switch (window.location.pathname) {
|
||||
case `${route.link}`:
|
||||
if (value !== route.activeIndex) {
|
||||
setValue(route.activeIndex);
|
||||
setOpenDrawer(false);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}, [value, openDrawer, routes]);
|
||||
|
||||
useEffect(() => {
|
||||
routes.forEach((route) => {
|
||||
switch (window.location.pathname) {
|
||||
case `${route.link}`:
|
||||
if (value !== route.activeIndex) {
|
||||
setValue(route.activeIndex);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}, [value, routes]);
|
||||
|
||||
return (
|
||||
<Container ref={wrapper}>
|
||||
<Hidden mdUp>
|
||||
<IconButton
|
||||
onClick={() => setOpenDrawer(!openDrawer)}
|
||||
disableRipple
|
||||
className={classes.drawerIconContainer}
|
||||
>
|
||||
{openDrawer ? (
|
||||
<MenuOpenIcon className={classes.drawerIcon} />
|
||||
) : (
|
||||
<MenuIcon className={classes.drawerIcon} />
|
||||
)}
|
||||
</IconButton>
|
||||
</Hidden>
|
||||
return (
|
||||
<Container ref={wrapper}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: { sm: 'none', xs: 'flex' },
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'inherit',
|
||||
color: theme.palette.secondary.contrastText,
|
||||
boxShadow: 'none',
|
||||
}}>
|
||||
<IconButton
|
||||
size='large'
|
||||
onClick={() => setOpenDrawer(!openDrawer)}
|
||||
disableRipple
|
||||
color='inherit'>
|
||||
{openDrawer ? (
|
||||
<MenuOpenIcon fontSize='inherit' />
|
||||
) : (
|
||||
<MenuIcon fontSize='inherit' />
|
||||
)}
|
||||
</IconButton>
|
||||
<DarkModeToogle style={{ alignSelf: 'right', color: 'inherit' }} />
|
||||
</Paper>
|
||||
|
||||
{matches ? (
|
||||
<SwipeableDrawer
|
||||
disableBackdropTransition={!iOS}
|
||||
disableDiscovery={iOS}
|
||||
open={openDrawer}
|
||||
onOpen={open}
|
||||
onClose={close}
|
||||
classes={{ paper: classes.drawer }}
|
||||
>
|
||||
<div className={classes.toolbar} />
|
||||
|
||||
<List disablePadding>
|
||||
{routes.map((route) => (
|
||||
<ListItem
|
||||
className={classes.listitems}
|
||||
key={`${route}${route.activeIndex}`}
|
||||
button
|
||||
component={Link}
|
||||
to={route.link}
|
||||
value={route.activeIndex}
|
||||
selected={value === route.activeIndex}
|
||||
classes={{ selected: classes.selected }}
|
||||
onClick={() => {
|
||||
setValue(route.activeIndex);
|
||||
setOpenDrawer(false);
|
||||
}}
|
||||
>
|
||||
<ListItemText disableTypography className={classes.listText}>
|
||||
{route.name}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</SwipeableDrawer>
|
||||
) : (
|
||||
<Hidden smDown>
|
||||
<Tabs
|
||||
action={tabsActions}
|
||||
value={value}
|
||||
onChange={handleTabsChange}
|
||||
centered
|
||||
>
|
||||
{routes.map((route) => (
|
||||
<Tab
|
||||
key={`${route.activeIndex}`}
|
||||
label={route.name}
|
||||
component={Link}
|
||||
to={route.link}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Hidden>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
{matches ? (
|
||||
<SwipeableDrawer
|
||||
disableBackdropTransition={!iOS}
|
||||
disableDiscovery={iOS}
|
||||
disableSwipeToOpen={false}
|
||||
open={openDrawer}
|
||||
onOpen={() => setOpenDrawer(true)}
|
||||
onClose={() => setOpenDrawer(false)}
|
||||
sx={{
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
<List sx={{ paddingTop: '4rem' }}>
|
||||
{routes.map((route) => (
|
||||
<ListItem
|
||||
sx={{
|
||||
padding: '1.5rem 2rem ',
|
||||
color: theme.palette.text.secondary,
|
||||
width: '100%',
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
key={`${route}${route.activeIndex}`}
|
||||
button
|
||||
component={Link}
|
||||
to={route.link}
|
||||
value={route.activeIndex}
|
||||
selected={value === route.activeIndex}
|
||||
onClick={() => {
|
||||
setValue(route.activeIndex);
|
||||
setOpenDrawer(false);
|
||||
}}>
|
||||
<ListItemText
|
||||
disableTypography
|
||||
sx={{
|
||||
alignItems: 'flex-start',
|
||||
fontSize: '1.2rem',
|
||||
textTransform: 'capitalize',
|
||||
}}>
|
||||
{route.name}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</SwipeableDrawer>
|
||||
) : (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: { sm: 'block', xs: 'none' },
|
||||
}}>
|
||||
<Tabs
|
||||
action={tabsActions}
|
||||
value={value}
|
||||
onChange={handleTabsChange}
|
||||
centered
|
||||
TabIndicatorProps={{
|
||||
style: {
|
||||
background: theme.palette.secondary.contrastText,
|
||||
height: '3px',
|
||||
},
|
||||
}}>
|
||||
{routes.map((route) => (
|
||||
<Tab
|
||||
disableRipple
|
||||
key={`${route.activeIndex}`}
|
||||
label={route.name}
|
||||
component={Link}
|
||||
to={route.link}
|
||||
sx={{
|
||||
fontSize: '1.2rem',
|
||||
'&.Mui-selected': {
|
||||
color: theme.palette.secondary.contrastText,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Paper>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
export default Navigation;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './Main';
|
||||
export { default } from './MainLayout';
|
||||
|
||||
Reference in New Issue
Block a user