create-react-app and couchdb

client/src/components/Navigation/Drawer/DrawerButton.css

@@ -0,0 +1,28 @@
+.drawer_button {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 30px;
+    width: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.drawer_button:focus {
+    outline:none;
+}
+
+.drawer_button_line {
+    width: 100%;
+    height: 2px;
+    background: white;
+}
+
+@media (min-width: 769px) {
+    .drawer_button {
+        display: none;
+    }
+}

client/src/components/Navigation/Drawer/DrawerButton.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import './DrawerButton.css'
+
+const DrawerButton = props => {
+    return (
+        <button className="drawer_button" onClick={props.click}>
+            <div className="drawer_button_line" />
+            <div className="drawer_button_line" />
+            <div className="drawer_button_line" />    
+        </button>
+    )
+}
+
+export default DrawerButton

client/src/components/Navigation/Drawer/SideDrawer.css

@@ -0,0 +1,55 @@
+.side_drawer {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background: #009954;
+    opacity: 0;
+    transition:opacity 0.3s;
+    pointer-events: none;
+}
+
+.side_drawer.open {
+    opacity: 1;
+    transition:opacity 0.3s; 
+    display: flex;
+    pointer-events: all;
+    /* animation: fadeInOpacity 0.5s linear; */
+}
+
+.side_drawer ul {
+    /* height: 100%; */
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: top;
+}
+
+.side_drawer li {
+    margin: 0.5rem 0;
+}
+
+.side_drawer a {
+    color: white;
+    text-decoration: none;
+    font-size: 2rem;
+}
+
+.side_drawer a:hover,
+.side_drawer a:active {
+    color: #ff3b76;
+}
+
+@keyframes fadeInOpacity {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+/* @media (max-width: 769px) {
+    .side_drawer {
+        display: none;
+    }
+} */

client/src/components/Navigation/Drawer/SideDrawer.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PagesList from '../PagesList';
+
+import './SideDrawer.css'
+
+const SideDrawer = props => {
+    let drawerClasses = 'side_drawer';
+    if (props.show) {
+        drawerClasses = 'side_drawer open';
+    }
+    return (
+        <nav className={drawerClasses}>
+            <PagesList click={props.drawerClickHandler}/>
+        </nav>
+    )
+}
+
+export default SideDrawer

client/src/components/Navigation/Navigation.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react'
+import Toolbar from './Toolbar/Toolbar'
+import SideDrawer from './Drawer/SideDrawer'
+
+class Navigation extends Component {   
+    state = {
+        sideDrawerOpen: false
+    };
+    
+    drawerToggleClickHandler = () => {
+        this.setState((prevState) => {
+            return {sideDrawerOpen: !prevState.sideDrawerOpen};
+        });
+    };
+
+    render() {
+        return (
+        <div>
+            <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
+            <SideDrawer show={this.state.sideDrawerOpen} drawerClickHandler={this.drawerToggleClickHandler}/>
+        </div>
+        )
+    }
+}
+
+export default Navigation

client/src/components/Navigation/PagesList.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Link } from "react-router-dom";
+
+const PagesList = props => {
+    return (
+        <ul>
+            <li><Link onClick={props.click} to="/Dashboard">Dashboard</Link></li>
+            <li><Link onClick={props.click} to="/Input">Input</Link></li>
+            <li><Link onClick={props.click} to="/Login">Login</Link></li>
+        </ul>
+    )
+}
+
+export default PagesList

client/src/components/Navigation/Toolbar/Toolbar.css

@@ -0,0 +1,56 @@
+.toolbar {
+    position: sticky;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    background: #00a65a;
+    height: 56px
+}
+
+.toolbar_navigation {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 1rem;
+}
+
+.toolbar_logo {
+    margin-left: 0.5rem;
+}
+
+.toolbar_logo a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.5rem;
+}
+
+.toolbar_spacer {
+    flex: 1;
+}
+
+.toolbar_items ul {
+    list-style: none;
+    margin: 0;
+    padding: 0 0;
+    display: flex;
+}
+
+.toolbar_items li {
+    padding: 0 0.6rem;
+}
+
+.toolbar_items a {
+    color: white;
+    text-decoration: none;
+}
+
+.toolbar_items a:hover,
+.toolbar_items a:active {
+    color: #ff3b76;
+}
+
+@media (max-width: 768px) {
+    .toolbar_items {
+        display: none;
+    }
+}

client/src/components/Navigation/Toolbar/Toolbar.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import DrawerButton from '../Drawer/DrawerButton';
+import PagesList from '../PagesList';
+import './Toolbar.css';
+import { Link } from 'react-router-dom';
+
+const Toolbar = props => {
+    return (
+            <header className="toolbar">
+                <nav className="toolbar_navigation">
+                    <DrawerButton click={props.drawerClickHandler} />
+                    <div className = "toolbar_logo"><Link to="/">Ridgebotics Scouting</Link></div>
+                    <div className = "toolbar_spacer" />
+                    <div className = "toolbar_items">
+                        <PagesList />
+                    </div>
+                </nav>
+            </header>
+    )
+}
+
+export default Toolbar