first template, material ui, navigation

src/layouts/main/Main.jsx

@@ -0,0 +1,35 @@
+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',
+    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} maxWidth='xl'>{children}</Container>
+      <Footer />
+    </div>
+  );
+};
+
+export default Main;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Footer = () => {
+  return <div style={{ marginTop: 'auto' }}>Footer</div>;
+};
+
+export default Footer;

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { AppBar, Toolbar, CssBaseline } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import HideOnScroll from './hideOnScroll';
+import Navigation from './navigation';
+
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    // position: 'relative',
+    zIndex: 1301,
+  },
+}));
+
+const Header = () => {
+  const classes = useStyles();
+  return (
+    <>
+      <CssBaseline />
+      <HideOnScroll>
+        <AppBar className={classes.appBar} position="static" elevation={0}>
+          <Toolbar>
+            <Navigation />
+          </Toolbar>
+        </AppBar>
+      </HideOnScroll>
+      {/* <Toolbar /> */}
+    </>
+  );
+};
+export default Header;

src/layouts/main/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/main/components/header/hideOnScroll/index.js

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

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

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

src/layouts/main/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/main/components/header/navigation/index.js

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

src/layouts/main/index.js

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