feat(menu-mobile): Torna o menu mobile responsivo

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",

package.json

@@ -42,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "react-headless-accordion": "^1.0.2",
     "sass": "^1.57.1"
   }
 }

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>

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 {

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;
       }
 

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;
 }

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;