Add navbar and sidebar

client/package.json

@@ -4,12 +4,14 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "sass": "^1.34.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

client/src/App.js

@@ -2,18 +2,21 @@
 // import LINKER from './Linker';
 // import CONFIG from './Config';
 
-import Button from './components/SampleButton';
-
 import './App.css';
+import Button from './components/SampleButton';
+import PastSubmissions from './components/PastSubmissions';
+import AppBar from './components/AppSideBar/AppSideBar';
 
 function App() {
   return (
     <div className="App">
+      <AppBar />
       <h1>Welcome to Sledge!</h1>
       <Button
         name="Jason"
         message="Sledge is the coolest web application ever!"
       />
+      <PastSubmissions />
     </div>
   );
 }

client/src/components/AppSideBar/AppSideBar.jsx

@@ -0,0 +1,66 @@
+/* eslint-disable */
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Typography from '@material-ui/core/Typography';
+import styles from './AppSideBar.module.scss';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+export default function ButtonAppBar() {
+  const classes = useStyles();
+
+  const openNav = () => {
+    document.getElementById('sideNav').style.width = '250px';
+  };
+
+  const closeNav = () => {
+    document.getElementById('sideNav').style.width = '0';
+  };
+
+  return (
+    <div className={classes.root}>
+      <div id="sideNav" className={styles.sideNav}>
+        <a
+          href="javascript:void(0)"
+          className={styles.closeBtn}
+          onClick={() => closeNav()}
+        >
+          &times;
+        </a>
+        <a href="#">New Submission</a>
+        <a href="#">HackRU</a>
+        <a href="#">Logout</a>
+      </div>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+            onClick={() => openNav()}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" className={classes.title}>
+            Sledge
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

client/src/components/AppSideBar/AppSideBar.module.scss

@@ -0,0 +1,27 @@
+.sideNav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: rgb(0, 0, 0);
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}
+
+.sideNav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #fff;
+  display: block;
+  transition: 0.3s;
+}
+
+.closeBtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+}

client/src/components/PastSubmissions.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+});
+
+function createData(name, season) {
+  return { name, season };
+}
+
+const rows = [
+  createData('HealthyDiet', 'Spring 2020'),
+  createData('RutgersBus', 'Fall 2020'),
+];
+
+export default function PastSubmissions() {
+  const classes = useStyles();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name of the hack</TableCell>
+            <TableCell align="right">Hackathon season</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.name}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.season}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

client/src/components/SampleButton.jsx

@@ -1,13 +1,13 @@
-import {Button} from "@material-ui/core"
+import { Button } from '@material-ui/core';
 
-export default function SampleButton({name, message}) {
+export default function SampleButton({ name, message }) {
   const showAlert = (amessage) => {
     alert(amessage);
   };
 
   return (
-    <Button color="primary" onClick={()=>showAlert(message)}>
-       {name} says...
+    <Button color="primary" onClick={() => showAlert(message)}>
+      {name} says...
     </Button>
   );
-};
+}

client/src/pages/HackerDashboard.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PastSubmissions from '../components/PastSubmissions';
+import styles from './HackerDashboard.module.scss';
+
+function HackerDashboard() {
+  return (
+    <div className={styles.hackerDashboardContainer}>
+      <p>Your past submissions</p>
+      <PastSubmissions />
+    </div>
+  );
+}
+
+export default HackerDashboard;

client/src/pages/HackerDashboard.module.scss

@@ -0,0 +1,3 @@
+.hackerDashboardContainer {
+  margin: 0 25px;
+}