WIP hamburger / sidebar menus

eloisebarrow · Aug 29, 2019 · e804fa6 · e804fa6
1 parent 7f4fcaa
commit e804fa6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "recycle-nyc",
-  "homepage": "https://eloisebarrow.github.com/recycle-nyc",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -16,8 +15,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "deploy" : "npm run build&&gh-pages -d build"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/src/App.css b/src/App.css
@@ -166,14 +166,16 @@ html, body, #root {
     padding: 2%;
   }
 
-  /*.link-styles, .headline, .ul-styles,*/ .headline, .recycle-logo {
+  .headline {
     display: none;
     margin: 0;
     padding: 0;
   }
 
   .hamburger {
-    display: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
     width: 70px;
     height: 70px;
     border: 1px solid white;
@@ -182,16 +184,43 @@ html, body, #root {
   }
 
   .hamburger-slice {
-    border-bottom: 5px solid white;
+    border-bottom: 3px solid #FFFFFF;
+    width: 90%;
+    margin-bottom: 3px;
+    align-self: center;
+    border-radius: 50%;
   }
 
-  .ul-styles {
-    display: flex;
+  .hamburger-slice:last-child {
+    margin-bottom: 0;
+  }
+
+  .sidebar {
+    display: none;
     flex-direction: column;
-    height: 100px;
+    /* height: 100px; */
     margin: 0;
     padding: 0;
-    transform: translate(100,0);
+    transform: translateX(120%);
+    transition: all .2s ease-in-out 0s;
+  }
+
+  .sidebar-active {
+    transform: translateX(0%);
+    transition: all .2s ease-in-out 0s;
+    display: flex;
+  }
+
+  .hideburger {
+    display: none;
+  }
+
+  li {
+    margin-bottom: 13px;
+  }
+
+  li:last-child {
+    margin-bottom: 0;
   }
 
   .link-styles {

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -3,7 +3,11 @@ import '../App.css';
 
 const Footer = () => {
   const handleClick = () => {
-    window.scrollTo(0,0);
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
   }
 
   return (

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,17 +1,24 @@
-import React from 'react'
+import React, { useState } from 'react'
 import '../App.css'
 import { Link } from 'react-router-dom'
 
 const Header = () => {
+  const [sidebarVisible, setSidebarVisible] = useState(false)
+
   return (
+
     <header className='header-styles'>
-
-      <h1 id="title">Recycle NYC</h1>
-      <div className='hamburger'>
-        <i class="fas fa-bars"></i>
 
+      <h1 id="title">Recycle NYC</h1>
+      <div
+      className={`${!sidebarVisible ? 'hamburger' : 'hideburger'}`}
+      onClick={() => setSidebarVisible(true)}
+      >
+        <div className="hamburger-slice"></div>
+        <div className="hamburger-slice"></div>
+        <div className="hamburger-slice"></div>
       </div>
-      <ul className='ul-styles'>
+      <ul className={`ul-styles sidebar ${sidebarVisible ? 'sidebar-active' : ''}`}>
         <li><Link className='link-styles' to="/">home</Link></li>
         <li><Link className='link-styles' to="/about">about</Link></li>
         <li><Link className='link-styles' to="/resources">resources</Link></li>