From 1e6986e0d8111a6b3e8dc3b7279302ae192edd8a Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Thu, 12 Jan 2023 14:37:27 -0300
Subject: [PATCH] feat(menu-mobile): Torna o menu mobile responsivo

---
 package-lock.json                        | 17 +++++++++++++++++
 package.json                             |  1 +
 src/components/HeaderBottom.tsx          | 19 ++++++++++++-------
 src/components/header-bottom.module.scss |  8 ++++++++
 src/components/header-top.module.scss    | 11 +----------
 src/globals.module.scss                  | 10 +++++++++-
 src/variables.module.scss                |  2 ++
 7 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ac10b15..a524f01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "react-headless-accordion": "^1.0.2",
         "sass": "^1.57.1"
       }
     },
@@ -13949,6 +13950,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-headless-accordion": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
+      "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26612,6 +26622,13 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-headless-accordion": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
+      "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
+      "dev": true,
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 62f5ce1..708dc92 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "react-headless-accordion": "^1.0.2",
     "sass": "^1.57.1"
   }
 }
diff --git a/src/components/HeaderBottom.tsx b/src/components/HeaderBottom.tsx
index ec75f48..947f771 100644
--- a/src/components/HeaderBottom.tsx
+++ b/src/components/HeaderBottom.tsx
@@ -1,19 +1,24 @@
 import React from "react";
-
 import style from "./header-bottom.module.scss";
 
 const HeaderBottom = () => {
   return (
     <header className={style["header-bottom-container"]}>
       <nav className={style["header-bottom-wrapper"]}>
-        <button type="button" className={style["header-button"]}>
-          cursos
+        <button type="button">
+          <a className={style["header-button"]} href="/">
+            cursos
+          </a>
         </button>
-        <button type="button" className={style["header-button"]}>
-          Saiba mais
+        <button type="button">
+          <a className={style["header-button"]} href="/">
+            Saiba mais
+          </a>
         </button>
-        <button type="button" className={style["header-button"]}>
-          Institucionais
+        <button type="button">
+          <a className={style["header-button"]} href="/">
+            Institucionais
+          </a>
         </button>
       </nav>
     </header>
diff --git a/src/components/header-bottom.module.scss b/src/components/header-bottom.module.scss
index 46b1e33..3ddcc56 100644
--- a/src/components/header-bottom.module.scss
+++ b/src/components/header-bottom.module.scss
@@ -4,6 +4,10 @@
   width: 100%;
   background: variables.$color-black;
 
+  @media screen and (max-width: 1024px) {
+    display: none;
+  }
+
   .header-bottom-wrapper {
     width: 80.46875%;
     display: flex;
@@ -16,6 +20,10 @@
       background: transparent;
       margin-right: 55px;
       cursor: pointer;
+
+      a {
+        text-decoration: none;
+      }
     }
 
     .header-button {
diff --git a/src/components/header-top.module.scss b/src/components/header-top.module.scss
index 38215f1..89b8e16 100644
--- a/src/components/header-top.module.scss
+++ b/src/components/header-top.module.scss
@@ -1,13 +1,5 @@
 @use "../variables.module.scss";
 
-ul {
-  list-style: none;
-}
-
-li {
-  list-style-type: none;
-}
-
 .header-top-container {
   width: 100%;
   height: 76px;
@@ -52,7 +44,7 @@ li {
       }
 
       .dropdown-menu {
-        // display: none;
+        width: 100%;
         position: fixed;
         left: 0;
         top: 0;
@@ -75,7 +67,6 @@ li {
       .menu-bottom,
       .menu-top {
         width: 96.484375%;
-        min-width: 988px;
         padding: 31px 16px;
       }
 
diff --git a/src/globals.module.scss b/src/globals.module.scss
index fb32c5a..49277fa 100644
--- a/src/globals.module.scss
+++ b/src/globals.module.scss
@@ -21,5 +21,13 @@
 }
 
 body {
-  font-family: "Roboto", sans-serif;
+  font-family: variables.$font-primary;
+}
+
+ul {
+  list-style: none;
+}
+
+li {
+  list-style-type: none;
 }
diff --git a/src/variables.module.scss b/src/variables.module.scss
index 06d1f1e..5e72221 100644
--- a/src/variables.module.scss
+++ b/src/variables.module.scss
@@ -2,6 +2,8 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
 
+$font-primary: "Roboto", sans-serif;
+
 //colors
 
 $color-black: #000000;