feat: header-botom desktop

desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss

@@ -9,11 +9,6 @@
   .m3LogoWrapper {
     display: flex;
     align-items: center;
-    // width: 11.5%;
-    // min-width: 136px;
-    // height: 50px;
-    // top: 50%;
-    // position: sticky;
 
     .M3Logo {
       width: 100%;
@@ -69,10 +64,6 @@
     .CartIcon_Wrapper {
       display: flex;
       align-items: center;
-      // width: 17%;
-      // max-height: 54px;
-      // top: 50%;
-      // position: sticky;
 
       .CartIcon {
         width: 100%;
@@ -80,3 +71,22 @@
     }
   }
 }
+
+.ModalWrapper {
+  padding: 14px 100px;
+  background: #000;
+  font-family: "Roboto", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+
+  button {
+    margin-right: 53px;
+    background: #000;
+    border: none;
+    color: #fff;
+    
+    cursor: pointer;
+  }
+}

desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx

@@ -3,6 +3,8 @@ import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg";
 import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg";
 import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg";
 
+import { ModalHeader } from "./ModalHeader";
+
 import "./HeaderDesktop.modules.scss";
 
 export const HeaderDesktop = () => {
@@ -32,6 +34,9 @@ export const HeaderDesktop = () => {
           </div>
         </div>
       </section>
+      <div className="Header_botom">
+        <ModalHeader />
+      </div>
     </>
   );
 };

desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss

@@ -11,7 +11,9 @@
   }
 
   .Search_Header_wrapper {
+    position: relative;
     width: 100%;
+
     .Search_Header {
       width: 100%;
       height: 36px;
@@ -19,5 +21,11 @@
       border: 2px solid #f0f0f0;
       border-radius: 5px;
     }
+
+    .SearchIcon {
+      position: absolute;
+      top: 25%;
+      right: 8px;
+    }
   }
 }

desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx

@@ -2,6 +2,7 @@ import { NavLink } from "react-router-dom";
 import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg";
 import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg";
 import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg";
+import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg";
 
 import "./HeaderMobile.modules.scss";
 
@@ -25,6 +26,9 @@ export const HeaderMobile = () => {
         </div>
         <div className="Search_Header_wrapper">
           <input readOnly className="Search_Header" placeholder="Buscar..." />
+          <NavLink to={""}>
+            <img src={SearchIcon} className="SearchIcon" alt="Search-Icon" />
+          </NavLink>
         </div>
       </section>
     </>

desafio-react-e-typescript/src/components/Header/ModalHeader.tsx

@@ -0,0 +1,19 @@
+import { NavLink } from "react-router-dom";
+
+export const ModalHeader = () => {
+  return (
+    <>
+      <div className="ModalWrapper">
+        <NavLink to={"/"}>
+          <button>CURSOS</button>
+        </NavLink>
+        <NavLink to={"/"}>
+          <button>SAIBA MAIS</button>
+        </NavLink>
+        <NavLink to={"/"}>
+          <button>INSTITUCIONAIS</button>
+        </NavLink>
+      </div>
+    </>
+  );
+};