From dbcf6b27927d85ad3a0544c9279f1f550cac9260 Mon Sep 17 00:00:00 2001
From: Eleonora Otz <nora_otz@hotmail.com>
Date: Tue, 3 Jan 2023 15:21:51 -0300
Subject: [PATCH] feat: Cria header mobile

---
 src/components/header/index.tsx         |  53 +++++--
 src/components/header/style.module.scss | 181 +++++++++++++++++++++---
 2 files changed, 207 insertions(+), 27 deletions(-)

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index d0f0b06..10d420a 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -1,28 +1,51 @@
-import React from "react";
+import React, { useState } from "react";
 
 import logom3Academy from "../../assets/imgs/Logo-M3Academy.png";
 import styles from "../header/style.module.scss";
 import Search from "../../assets/svgs/search.svg";
 import miniCart from "../../assets/svgs/minicart.svg";
-import BurgerMenu from "../../assets/svgs/menu.svg"
+import BurgerMenu from "../../assets/svgs/menu.svg";
+
 
 const Header = () => {
+
+  const [active, setMode] = useState(false);
+
+  const ToggleMode = () => {
+    setMode(!active);
+  };
+
   return (
     <div>
       <div className={styles["header-top"]}>
         <div className={styles["header-top__wrapper"]}>
+
+          <nav className={active? styles["header-top__menu-active"] : styles["header-top__menu"]} onClick={ToggleMode}>
+            <button className={styles["burger-menu"]}>
+              <img src={BurgerMenu} alt="Menu" />
+            </button>
+            <ul className={active ? styles["menu menu-open"] : styles["menu menu-closed"]}>
+            <li>Cursos</li>
+            <li>Saiba mais</li>
+            <li>Institucionais</li>
+          </ul>
+          </nav>
+
           <a className={styles["header-top__logo"]} href="/">
-            <img
-              src={logom3Academy}
-              alt="Logo M3 Academy"
-            />
+            <img src={logom3Academy} alt="Logo M3 Academy" />
           </a>
+
           <div className={styles["header-top__search-box"]}>
-            <input className="search-box-text" type="text" placeholder="Buscar..." />
+            <input
+              className="search-box-text"
+              type="text"
+              placeholder="Buscar..."
+            />
             <button className={styles["search-button"]}>
               <img src={Search} alt="" />
             </button>
           </div>
+
           <div className={styles["header-top__user-info"]}>
             <a href="./">
               <h2>Entrar</h2>
@@ -37,16 +60,24 @@ const Header = () => {
       </div>
 
       <div className={styles["header-bottom"]}>
-        <nav className={styles["nav-menu"]} >
-          <button className={styles["burger-menu"]}>
-            <img src={BurgerMenu} alt="Menu" />
-          </button>
+        <nav className={styles["header-bottom__nav-menu"]}>
           <ul className={styles["menu-list"]}>
             <li className={styles["first-li"]}>Cursos</li>
             <li className={styles["second-li"]}>Saiba mais</li>
             <li className={styles["third-li"]}>Institucionais</li>
           </ul>
         </nav>
+
+        <div className={styles["header-bottom__search-box"]}>
+            <input
+              className="search-box-text"
+              type="text"
+              placeholder="Buscar..."
+            />
+            <button className={styles["search-button"]}>
+              <img src={Search} alt="" />
+            </button>
+          </div>
       </div>
     </div>
   );
diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index bdacc23..0438246 100644
--- a/src/components/header/style.module.scss
+++ b/src/components/header/style.module.scss
@@ -3,6 +3,67 @@
   background: var(--black);
   border-bottom: 1px solid var(--light-gray-500);
 
+  @media (max-width: 1024px) {
+    border: none;
+  }
+
+  // Menu hambúrguer
+
+  &__menu {
+    display: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+
+    button {
+      display: none;
+      background: transparent;
+      border: none;
+      padding: 0;
+
+      &:active {
+        background: transparent;
+        border: none;
+        padding: 0;
+      }
+
+      @media (min-width: 600px) and (max-width: 1024px) {
+        display: block;
+        // background: transparent;
+        // border: none;
+        // padding: 0;
+      }
+
+      @media (max-width: 599px) {
+        display: block;
+        // background: transparent;
+        // border: none;
+        // padding: 0;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      display: block;
+      // background: transparent;
+      // border: none;
+      // padding: 0;
+    }
+
+    ul {
+      display: none;
+    }
+
+      li {
+        list-style: none;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        text-transform: uppercase;
+        color: var(--light-gray-500);
+      }
+    
+  }
+
   &__wrapper {
     width: 84.38%;
     margin: auto;
@@ -10,10 +71,17 @@
     align-items: center;
     justify-content: space-between;
 
-    @media (min-width:2500px) {
+    @media (min-width: 2500px) {
       width: 92%;
     }
 
+    @media (max-width: 1024px) {
+      width: 96.88%;
+    }
+
+    @media (max-width: 599px) {
+      width: 91.6%;
+    }
   }
 
   @media (max-width: 1024px) {
@@ -27,6 +95,16 @@
       width: 100%;
       margin: auto;
     }
+
+    @media (min-width: 600px) and (max-width: 1024px) {
+      width: 13.71%;
+      margin: 25px 0 27.14px;
+    }
+
+    @media (max-width: 599px) {
+      width: 36.27%;
+      margin: 25px 0 27.14px;
+    }
   }
 
   // Caixa de pesquisa
@@ -37,6 +115,7 @@
     input {
       width: 204px;
       background-color: var(--white);
+      color: var(--light-gray-600);
       border: 2px solid var(--light-gray-300);
       border-radius: 5px;
       margin: 22px 0;
@@ -76,6 +155,10 @@
         top: 34px;
       }
     }
+
+    @media (max-width: 1024px) {
+      display: none;
+    }
   }
 
   // Links de página do usuário e carrinho
@@ -84,13 +167,15 @@
     display: flex;
     align-items: center;
     gap: 55px;
-    // margin: 0 100px 0 0;
+
+    @media (max-width: 1024px) {
+      gap: 0;
+    }
 
     a {
       text-decoration: none;
 
       h2 {
-        // margin: 0 55px 0 0;
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
@@ -101,6 +186,10 @@
           font-size: 28px;
           line-height: 33px;
         }
+
+        @media (max-width: 1024px) {
+          display: none;
+        }
       }
     }
 
@@ -123,24 +212,14 @@
 .header-bottom {
   background: var(--black);
 
-  .nav-menu {
+  &__nav-menu {
     width: 84.38%;
     margin: auto;
 
-    @media (min-width:2500px) {
+    @media (min-width: 2500px) {
       width: 92%;
     }
 
-    .burger-menu {
-      display: none;
-
-      @media (max-width: 1024px) {
-        display: block;
-        background: transparent;
-        border: none;
-      }
-    }
-
     ul {
       display: flex;
       align-items: center;
@@ -156,7 +235,6 @@
         font-weight: 500;
         font-size: 14px;
         line-height: 16px;
-        // padding: 14px 27.5px;
         text-transform: uppercase;
         list-style: none;
         color: var(--white);
@@ -180,8 +258,79 @@
       .third-li {
         padding: 14px 27.5px;
       }
+    }
+  }
 
+  &__search-box {
+    display: none;
 
+    @media (max-width: 1024px) {
+      display: block;
+      position: relative;
+      width: 93.36%;
+      // margin: 0 auto;
+
+      input {
+        width: 100%;
+        background-color: var(--white);
+        border: 2px solid var(--light-gray-300);
+        color: var(--light-gray-600);
+        border-radius: 5px;
+        margin: 0 16px 25px 16px;
+        padding: 10px 16px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        outline: none;
+
+        &::placeholder {
+          width: 100px;
+          color: var(--light-gray-600);
+        }
+      }
+
+      @media (max-width: 599px) {
+        display: block;
+        position: relative;
+        width: 81.9%;
+
+        input {
+          width: 100%;
+          background-color: var(--white);
+          border: 2px solid var(--light-gray-300);
+          color: var(--light-gray-600);
+          border-radius: 5px;
+          margin: 0 16px 25px 16px;
+          padding: 10px 16px;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          outline: none;
+
+          &::placeholder {
+            color: var(--light-gray-600);
+          }
+        }
+      }
+
+      .search-button {
+        position: absolute;
+        right: -34px;
+        background-color: transparent;
+        border: 0;
+        padding: 0;
+        width: 1.872%;
+        top: 11px;
+
+        img {
+          width: 100%;
+          margin: 0;
+        }
+
+        @media (max-width: 599px) {
+          width: 5.886%;
+        }
+      }
     }
   }
 }