Merge pull request #23 from Pma913/feature/hamburg

Feature/hamburg

src/components/Hamburg/Hamburg.js

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import './Hamburg.css';
+import ham from '../../utilities/hamburg.svg';
+import x from '../../utilities/x.svg';
+
+
+const Hamburg = () => {
+  const [hamburger, setHamburger] = useState(false);
+  const [hidden, setHidden] = useState('hidden');
+
+  const toggleHamburg = () => {
+    setHamburger(!hamburger);
+    toggleHidden();
+  }
+
+  const toggleHidden = () => {
+    hidden === 'hidden' ? setHidden('') : setHidden('hidden');
+  }
+
+  return (
+    <div className="ham-menu-box">
+      <img className="hamburg" alt="" src={!hamburger ? ham : x} onClick={toggleHamburg}/>
+      <div className={`home-menu ${hidden}`}>
+        <NavLink className="link" to="/">home</NavLink>
+        <NavLink className="link" to="/fact">facts</NavLink>
+        <NavLink className="link" to="/favorites">favorites</NavLink>
+      </div>
+    </div>
+  )
+}
+
+export default Hamburg;

src/components/Header/Header.css

@@ -1,24 +1,29 @@
 .header {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
   background-color: rgb(7, 241, 218);
 }
 
 .logo {
-  height: 150px;
+  height: 135px;
   cursor: pointer;
+  margin: 10px;
 }
 
 .app-title {
   font-size: xxx-large;
 }
 
-.link {
+.link,
+.logo-link {
   all: unset;
+  cursor: pointer;
+}
+
+.link {
   margin: 5px;
   font-size: large;
   font-weight: 500;
-  cursor: pointer;
 }
 
 .link:hover {
@@ -27,11 +32,6 @@
   border-radius: 2px;
 }
 
-.hamburg {
-  width: 2em;
-  cursor: pointer;
-}
-
 .hidden {
   display: none;
 }
@@ -41,7 +41,13 @@
   align-items: center;
 }
 
-@media (max-width: 584px){
+@media (min-width: 584px) {
+  .ham-menu-box {
+    display: none;
+  }
+}
+
+@media (max-width: 584px) {
   .app-title {
     text-align: center;
   }
@@ -50,5 +56,14 @@
     flex-direction: column;
     align-items: center;
   }
+
+  .hamburg {
+    width: 2em;
+    cursor: pointer;
+  }
+
+  .nav-links {
+    display: none;
+  }  
 }   
 

src/components/Header/Header.js

@@ -1,32 +1,20 @@
 import React, { useState } from 'react';
 import { NavLink, Link } from 'react-router-dom';
 import './Header.css';
-import ham from '../../utilities/hamburg.svg' 
+import Hamburg from '../Hamburg/Hamburg';
 
 const Header = () => {
-  const [dropDown, setDropdown] = useState("hidden")
-  // const [hamb, setHamb] = useState("")
-
-  const toggleDrop = () => {
-    if (dropDown === "hidden") {
-      setDropdown("")
-      // setHamb("hidden")
-    } else {
-      setDropdown("hidden")
-      // setHamb("")
-    } 
-  }
 
   return (
     <section className="header">
       <Link to="/"><img className="logo" src="./cats_meow.png" alt="Cute cat"/></Link> 
-      <h1 className="app-title">Cats Meow</h1>
-      <img className={`hamburg hidden`} src={ham} alt="ham menu" onClick={toggleDrop}/>
+      <Link to="/" className="logo-link"><h1 className="app-title">Cats Meow</h1></Link>
       <div className={`nav-links`}>
         <NavLink className="link" to="/">home</NavLink>
         <NavLink className="link" to="/fact">facts</NavLink>
         <NavLink className="link" to="/favorites">favorites</NavLink>
       </div>
+      <Hamburg />
     </section>
   );
 };