updated dependencies

src/layouts/common/darkModeToogle/DarkModeToogle.jsx

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { IconButton } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { ColorModeContext } from 'App';
+import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
+import NightsStayOutlinedIcon from '@mui/icons-material/NightsStayOutlined';
+
+const DarkModeToogle = () => {
+	const theme = useTheme();
+	const colorMode = useContext(ColorModeContext);
+
+	return (
+		<IconButton disableRipple onClick={colorMode.toggleColorMode} sx={{ color: theme.palette.text.secondary }} >
+			{theme.palette.mode === 'dark' ? (
+				<WbSunnyOutlinedIcon />
+			) : (
+				<NightsStayOutlinedIcon />
+			)}
+		</IconButton>
+	);
+};
+
+export default DarkModeToogle;

src/layouts/common/fullScreenContainer/FullScreenContainer.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Container } from '@mui/material';
+
+const FullScreenContainer = (props) => {
+	const { children } = props;
+	// const theme = useTheme();
+	return (
+		<Container
+			maxWidth='lg'
+			sx={{
+				minHeight: 'calc(100vh - 24px )',
+				paddingTop: '4rem',
+				paddingBottom: '2rem',
+				flex: 1,
+				fallbacks: [
+					{ minHeight: '-moz-calc(100% - 24px)' },
+					{ minHeight: '-webkit-calc(100% - 24px)' },
+					{ minHeight: '-o-calc(100% - 24px)' },
+				],
+			}}>
+			{children}
+		</Container>
+	);
+};
+
+export default FullScreenContainer;

src/layouts/common/fullScreenContainer/index.js

@@ -0,0 +1 @@
+export { default } from './FullScreenContainer';

src/layouts/common/hideOnScroll/HideOnScroll.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useScrollTrigger, Slide } from '@mui/material';
+
+const HideOnScroll = (props) => {
+	const { children, window } = props;
+	const trigger = useScrollTrigger({
+		target: window ? window() : undefined,
+	});
+
+	return (
+		<Slide appear={false} direction='down' in={!trigger}>
+			{children}
+		</Slide>
+	);
+};
+
+export default HideOnScroll;

src/layouts/common/hideOnScroll/index.js

@@ -0,0 +1 @@
+export { default } from './HideOnScroll.jsx';

src/layouts/landing/LandingLayout.jsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+
+import { ThemeProvider } from '@mui/material/styles';
+
+import { ColorModeContext } from 'App';
+import { LandingWhite } from 'themes/Theme';
+import FullScreenContainer from 'layouts/common/fullScreenContainer';
+
+import Footer from './components/footer';
+import Header from './components/header';
+
+const LandingLayout = (props) => {
+	const { children } = props;
+
+	const colorMode = useContext(ColorModeContext);
+
+	return (
+		<ColorModeContext.Provider value={colorMode}>
+			<ThemeProvider theme={LandingWhite}>
+				<div id='back-to-top-anchor' />
+				<Header />
+				<FullScreenContainer>{children}</FullScreenContainer>
+				<Footer />
+			</ThemeProvider>
+		</ColorModeContext.Provider>
+	);
+};
+
+export default LandingLayout;

src/layouts/landing/components/footer/Footer.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import useScrollTrigger from '@mui/material/useScrollTrigger';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { Grid, Grow, Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+
+function ScrollTop(props) {
+	const { children, window } = props;
+
+	const trigger = useScrollTrigger({
+		target: window ? window() : undefined,
+		disableHysteresis: true,
+		threshold: 100,
+	});
+
+	const handleClick = (event) => {
+		const anchor = (event.target.ownerDocument || document).querySelector(
+			'#back-to-top-anchor'
+		);
+
+		if (anchor) {
+			anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	};
+
+	return (
+		<Grow
+			in={trigger}
+			style={{ transformOrigin: '0 0 0' }}
+			{...(trigger ? { timeout: 1000 } : {})}>
+			<Box onClick={handleClick} role='presentation'>
+				{children}
+			</Box>
+		</Grow>
+	);
+}
+
+const Footer = (props) => {
+	const theme = useTheme();
+	return (
+		<Grid container justifyContent='center' alignItems='center' id='footer'>
+			<ScrollTop {...props} >
+				<KeyboardArrowUpIcon
+					sx={{
+						width: '5rem',
+						height: '5rem',
+						[theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' },
+					}}
+				/>
+			</ScrollTop>
+		</Grid>
+	);
+};
+export default Footer;

src/layouts/landing/components/header/Header.jsx

@@ -0,0 +1,88 @@
+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 DarkModeToogle from 'layouts/common/darkModeToogle';
+import HideOnScroll from 'layouts/common/hideOnScroll';
+
+const handleScrollDown = (event) => {
+	event.preventDefault();
+	const anchor = (event.target.ownerDocument || document).querySelector(
+		'#footer'
+	);
+
+	if (anchor) {
+		anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
+	}
+};
+
+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: '.3rem',
+										}}>
+										Dan Dobos
+									</Typography>
+
+									<MaterialLink
+										color='textPrimary'
+										to='#about'
+										style={{ cursor: 'pointer' }}
+										onClick={handleScrollDown}>
+										About
+									</MaterialLink>
+								</Breadcrumbs>
+							</Grid>
+							<Grid item>
+								<Grid container alignItems='center'>
+									<Link to='/projects'>
+										<IconButton disableRipple sx={{ mr: 1 }}>
+											<ThreeSixtyOutlinedIcon />
+										</IconButton>
+									</Link>
+									<DarkModeToogle />
+								</Grid>
+							</Grid>
+						</Grid>
+					</Toolbar>
+				</AppBar>
+			</HideOnScroll>
+		</>
+	);
+};
+export default Header;

src/layouts/landing/index.js

@@ -0,0 +1 @@
+export {default} from './LandingLayout.jsx'

src/layouts/main/Main.jsx

@@ -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;

src/layouts/main/MainLayout.jsx

@@ -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;

src/layouts/main/components/footer/Footer.jsx

@@ -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 &copy; 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 &copy; {getCurrentYear()} Build with passion
+				</Typography>
+			</Grid>
+		</Grid>
+	);
 };
 
 export default Footer;

src/layouts/main/components/header/Header.jsx

@@ -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;

src/layouts/main/components/header/navigation/Navigation.jsx

@@ -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;

src/layouts/main/index.js

@@ -1 +1 @@
-export { default } from './Main';
+export { default } from './MainLayout';

src/layouts/white/White.jsx

@@ -1,52 +0,0 @@
-import React, { useContext } from 'react';
-import { Container } from '@material-ui/core';
-import {
-  ThemeProvider,
-  createMuiTheme,
-  makeStyles,
-} from '@material-ui/core/styles';
-import {ThemeContext} from '../../App'
-
-import Footer from './components/footer';
-import Header from './components/header';
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    minHeight: '100vh',
-    paddingTop: '2rem',
-    // paddingBottom: '2rem',
-    fallbacks: [
-      { minHeight: '-moz-calc(100% - 128px)' },
-      { minHeight: '-webkit-calc(100% - 128px)' },
-      { minHeight: '-o-calc(100% - 128px)' },
-    ],
-  },
-}));
-
-
-const White = (props) => {
-  const { children } = props;
-  const classes = useStyles();
-  const { darkMode} = useContext(ThemeContext);
-
-  let theme = createMuiTheme({
-    typography: {
-      fontFamily: 'Yeon Sung',
-      transform: 'matrix(1, 0, 0, 1, 0, 0)',
-
-    },
-    palette: {
-      type: darkMode ? 'dark' : 'light',
-    },
-  });
-  return (
-    <ThemeProvider theme={theme}>
-      <div id="back-to-top-anchor" />
-      <Header />
-      <Container className={classes.container}>{children}</Container>
-      <Footer />
-    </ThemeProvider>
-  );
-};
-
-export default White;

src/layouts/white/components/footer/Footer.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import { makeStyles } from '@material-ui/core/styles';
-import useScrollTrigger from '@material-ui/core/useScrollTrigger';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
-import { Grid, Zoom } from '@material-ui/core';
-
-const useStyles = makeStyles((theme) => ({
-  icon: {
-    width: '5rem',
-    height: '5rem',
-    [theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' },
-  },
-}));
-
-function ScrollTop(props) {
-  const { children, window } = props;
-
-  const trigger = useScrollTrigger({
-    target: document.querySelector('#footer') ? window : undefined,
-  });
-
-  const handleClick = (event) => {
-    const anchor = (event.target.ownerDocument || document).querySelector(
-      '#back-to-top-anchor'
-    );
-
-    if (anchor) {
-      anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-  };
-
-  return (
-    <Zoom in={trigger}>
-      <div onClick={handleClick} role="presentation">
-        {children}
-      </div>
-    </Zoom>
-  );
-}
-
-const Footer = (props) => {
-  const classes = useStyles();
-  return (
-    <Grid container justify="center" alignItems="center" id="footer">
-      <ScrollTop {...props}>
-        <KeyboardArrowUpIcon className={classes.icon} />
-      </ScrollTop>
-    </Grid>
-  );
-};
-export default Footer;

src/layouts/white/components/header/Header.jsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import {
-  AppBar,
-  Toolbar,
-  CssBaseline,
-  Typography,
-  Breadcrumbs,
-  Link as MaterialLink,
-  Grid,
-  IconButton
-} from '@material-ui/core';
-import DarkModeToogle from './darkModeToogle'
-import { makeStyles } from '@material-ui/styles';
-import HideOnScroll from '../../../../common/hideOnScroll'
-import ThreeSixtyOutlinedIcon from '@material-ui/icons/ThreeSixtyOutlined';
-
-
-const useStyles = makeStyles((theme) => ({
-  appBar: {
-    position: 'fixed',
-    zIndex: 1301,
-    background: 'transparent',
-    [theme.breakpoints.down('lg')]: {
-      backgroundColor: theme.palette.background.default,
-    },
-  },
-  name: {
-    textTransform: 'uppercase',
-    letterSpacing: '.5rem',
-  }
-  
-
-}));
-const handleScrollDown = (event) => {
-  event.preventDefault();
-  const anchor = (event.target.ownerDocument || document).querySelector(
-    '#footer'
-  );
-
-  if (anchor) {
-    anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  }
-};
-
-const Header = () => {
-  const classes = useStyles();
-
-  return (
-    <>
-      <CssBaseline />
-      <HideOnScroll>
-      <AppBar className={classes.appBar} elevation={0}>
-        <Toolbar>
-          <Grid container justify="space-between">
-            <Grid item>
-              <Breadcrumbs aria-label="breadcrumb">
-                <Typography
-                  color="textPrimary"
-                  variant="h5"
-                  className={classes.name}
-                >
-                  Dan Dobos
-                </Typography>
-
-                <MaterialLink
-                  color="textPrimary"
-                  to="#about"
-                  onClick={handleScrollDown}
-                >
-                  About
-                </MaterialLink>
-              </Breadcrumbs>
-            </Grid>
-            <Grid item >
-              <Grid container alignItems="center">
-                <DarkModeToogle/>
-                <Link to="/projects">
-                  <IconButton disableRipple>
-                    <ThreeSixtyOutlinedIcon  />
-                  </IconButton>
-                </Link>
-              </Grid>
-            </Grid>
-          </Grid>
-        </Toolbar>
-      </AppBar>
-      </HideOnScroll>
-      <Toolbar />
-    </>
-  );
-};
-export default Header;

src/layouts/white/components/header/darkModeToogle/DarkModeToogle.jsx

@@ -1,24 +0,0 @@
-import React,{useContext} from 'react';
-import {IconButton} from '@material-ui/core'
-import {ThemeContext} from '../../../../../App'
-import WbSunnyOutlinedIcon from '@material-ui/icons/WbSunnyOutlined';
-import NightsStayOutlinedIcon from '@material-ui/icons/NightsStayOutlined';
-
-const DarkModeToogle = () => {
-
-  const { darkMode, setDarkMode } = useContext(ThemeContext);
-  const icon = darkMode ?
-  <WbSunnyOutlinedIcon /> : <NightsStayOutlinedIcon />
-
-  return (
-    <IconButton
-        disableRipple
-        onClick={() => setDarkMode(!darkMode)}
-  >
-    {icon}
-  </IconButton>
-
-  );
-};
-
-export default DarkModeToogle;

src/layouts/white/index.js

@@ -1 +0,0 @@
-export {default} from './White.jsx'