landing page structure

src/layouts/main/Main.jsx

@@ -9,6 +9,7 @@ const useStyles = makeStyles((theme) => ({
     minHeight: 'calc(100vh-128px)',
     paddingTop: '2rem',
     paddingBottom: '2rem',
+    // flex: 1,
     fallbacks: [
       { minHeight: '-moz-calc(100% - 128px)' },
       { minHeight: '-webkit-calc(100% - 128px)' },
@@ -22,13 +23,19 @@ const Main = (props) => {
   const classes = useStyles();
 
   return (
-    <div
-      style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}
-    >
-      <Header />
-      <Container className={classes.container} maxWidth='xl'>{children}</Container>
-      <Footer />
-    </div>
+    <>
+      <div
+        style={{
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Header />
+        <Container className={classes.container}>{children}</Container>
+        <Footer />
+      </div>
+    </>
   );
 };
 

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

@@ -1,7 +1,23 @@
 import React from 'react';
+import { AppBar, Toolbar, Grid, Typography } from '@material-ui/core';
 
 const Footer = () => {
-  return <div style={{ marginTop: 'auto' }}>Footer</div>;
+  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>
+  );
 };
 
 export default Footer;

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

@@ -7,7 +7,7 @@ import Navigation from './navigation';
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
-    // position: 'relative',
+    position: 'relative',
     zIndex: 1301,
   },
 }));

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createRef } from 'react';
+import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Container,
@@ -8,6 +8,9 @@ import {
   useMediaQuery,
   IconButton,
   SwipeableDrawer,
+  ListItem,
+  ListItemText,
+  List,
 } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import MenuOpenIcon from '@material-ui/icons/MenuOpen';
@@ -24,16 +27,32 @@ const useStyles = makeStyles((theme) => ({
   drawerIcon: {
     height: '40px',
     width: '40px',
-    color: 'white',
+    color: theme.palette.secondary.main,
   },
-  drawer: { minWidth: '50vw' },
-  tab: {
+  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: '2rem',
+    fontSize: '1.5rem',
     textTransform: 'capitalize',
-
   },
-  right: {},
+  selected: {
+    '&.Mui-selected': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.secondary.main,
+    },
+  },
 }));
 
 const Navigation = (props) => {
@@ -42,12 +61,14 @@ const Navigation = (props) => {
 
   const matches = useMediaQuery(theme.breakpoints.down('sm'));
   const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(1);
   const [openDrawer, setOpenDrawer] = useState(false);
 
+  const tabsActions = useRef(null);
+  
+
   const handleTabsChange = (e, newValue) => {
     setValue(newValue);
-    setOpenDrawer(false);
   };
 
   const open = () => {
@@ -58,6 +79,56 @@ const Navigation = (props) => {
   };
   const wrapper = createRef();
 
+  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);
+          }
+          break;
+        default:
+          return false;
+      }
+    });
+  }, [value, routes]);
+  useEffect(() => {
+    setTimeout(() => {
+      tabsActions.current?.updateIndicator();
+    }, 100);
+  });
+
   return (
     <Container ref={wrapper}>
       <Hidden mdUp>
@@ -84,52 +155,46 @@ const Navigation = (props) => {
           classes={{ paper: classes.drawer }}
         >
           <div className={classes.toolbar} />
-          <Tabs
-            value={value}
-            onChange={handleTabsChange}
-            orientation="vertical"
-            indicatorColor="primary"
-          >
-            <Tab
-              label="Home"
-              component={Link}
-              to="/"
-              classes={{ wrapper: classes.tab }}
-            />
-            <Tab
-              label="Projects"
-              component={Link}
-              to="/projects"
-              classes={{ wrapper: classes.tab }}
-            />
-            <Tab
-              label="Games"
-              component={Link}
-              to="/games"
-              classes={{ wrapper: classes.tab }}
-            />
-            <Tab
-              label="Snippets"
-              component={Link}
-              to="/snippets"
-              classes={{ wrapper: classes.tab }}
-            />
-            <Tab
-              label="About"
-              component={Link}
-              to="/about"
-              classes={{ wrapper: classes.tab }}
-            />
-          </Tabs>
+
+          <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 value={value} onChange={handleTabsChange} centered>
-            <Tab label="Home" component={Link} to="/" />
-            <Tab label="Projects" component={Link} to="/projects" />
-            <Tab label="Games" component={Link} to="/games" />
-            <Tab label="Snippets" component={Link} to="/snippets" />
-            <Tab label="About" component={Link} to="/about" />
+          <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>
       )}

src/layouts/white/White.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Container } from '@material-ui/core';
+import {
+  ThemeProvider,
+  createMuiTheme,
+  makeStyles,
+  responsiveFontSizes,
+} from '@material-ui/core/styles';
+
+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)' },
+    ],
+  },
+}));
+
+let theme = createMuiTheme({
+  typography: {
+    fontFamily: 'Yeon Sung',
+    transform: 'matrix(1, 0, 0, 1, 0, 0)',
+    // h1: {
+    //   // marginLeft: '-.5rem',
+    //   paddingLeft: 0,
+    // },
+  },
+});
+theme = responsiveFontSizes(theme);
+
+const White = (props) => {
+  const { children } = props;
+  const classes = useStyles();
+
+  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

@@ -0,0 +1,58 @@
+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',
+  },
+}));
+
+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}
+          style={{
+            width: '5rem',
+            height: '5rem',
+          }}
+        />
+      </ScrollTop>
+      {/* <div style={{ height: '30rem' }} /> */}
+    </Grid>
+  );
+};
+export default Footer;

src/layouts/white/components/footer/index.js

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

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import {Link} from 'react-router-dom'
+import {
+  AppBar,
+  Toolbar,
+  CssBaseline,
+  Typography,
+  Breadcrumbs,
+  Link as MaterialLink,
+  Grid,
+} from '@material-ui/core';
+import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined';
+
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    position: 'fixed',
+    zIndex: 1301,
+    backgroundColor: '#FAFAFA',
+  },
+  name: {
+    textTransform: 'uppercase',
+    letterSpacing: '.5rem',
+  },
+}));
+function handleClick(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 />
+      <AppBar className={classes.appBar} position="fixed" 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={handleClick}>
+                  About
+                </MaterialLink>
+              </Breadcrumbs>
+            </Grid>
+            <Grid item>
+              <Link color="textPrimary" to="/projects">
+                <CachedOutlinedIcon/>
+              </Link>
+            </Grid>
+          </Grid>
+        </Toolbar>
+      </AppBar>
+      <Toolbar />
+    </>
+  );
+};
+export default Header;

src/layouts/white/components/header/hideOnScroll/HideOnScroll.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useScrollTrigger, Slide } from '@material-ui/core';
+
+
+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/white/components/header/hideOnScroll/index.js

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

src/layouts/white/components/header/index.js

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

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

@@ -0,0 +1,139 @@
+import React, { useState, useEffect, createRef } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Container,
+  Hidden,
+  Tabs,
+  Tab,
+  useMediaQuery,
+  IconButton,
+  SwipeableDrawer,
+} 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';
+
+const useStyles = makeStyles((theme) => ({
+  toolbar: theme.mixins.toolbar,
+
+  drawerIconContainer: {
+    alignSelf: 'center',
+    '&:hover': { backgroundColor: 'transparent' },
+    [theme.breakpoints.down('md')]: { padding: 0 },
+  },
+  drawerIcon: {
+    height: '40px',
+    width: '40px',
+    color: 'white',
+  },
+  drawer: { minWidth: '50vw' },
+  tab: {
+    alignItems: 'flex-start',
+    fontSize: '2rem',
+    textTransform: 'capitalize',
+
+  },
+  right: {},
+}));
+
+const Navigation = (props) => {
+  const classes = useStyles();
+  const theme = useTheme();
+
+  const matches = useMediaQuery(theme.breakpoints.down('sm'));
+  const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
+  const [value, setValue] = useState(0);
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const handleTabsChange = (e, newValue) => {
+    setValue(newValue);
+    setOpenDrawer(false);
+  };
+
+  const open = () => {
+    setOpenDrawer(true);
+  };
+  const close = () => {
+    setOpenDrawer(false);
+  };
+  const wrapper = createRef();
+
+  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>
+
+      {matches ? (
+        <SwipeableDrawer
+          disableBackdropTransition={!iOS}
+          disableDiscovery={iOS}
+          open={openDrawer}
+          onOpen={open}
+          onClose={close}
+          classes={{ paper: classes.drawer }}
+        >
+          <div className={classes.toolbar} />
+          <Tabs
+            value={value}
+            onChange={handleTabsChange}
+            orientation="vertical"
+            indicatorColor="primary"
+          >
+            <Tab
+              label="Home"
+              component={Link}
+              to="/"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="Projects"
+              component={Link}
+              to="/projects"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="Games"
+              component={Link}
+              to="/games"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="Snippets"
+              component={Link}
+              to="/snippets"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="About"
+              component={Link}
+              to="/about"
+              classes={{ wrapper: classes.tab }}
+            />
+          </Tabs>
+        </SwipeableDrawer>
+      ) : (
+        <Hidden smDown>
+          <Tabs value={value} onChange={handleTabsChange} centered>
+            <Tab label="Home" component={Link} to="/" />
+            <Tab label="Projects" component={Link} to="/projects" />
+            <Tab label="Games" component={Link} to="/games" />
+            <Tab label="Snippets" component={Link} to="/snippets" />
+            <Tab label="About" component={Link} to="/about" />
+          </Tabs>
+        </Hidden>
+      )}
+    </Container>
+  );
+};
+export default Navigation;

src/layouts/white/components/header/navigation/index.js

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

src/layouts/white/index.js

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