feat(header): Adicionado header do mobile

src/components/M3Logo/M3Logo.tsx

@@ -1,8 +1,14 @@
 import React from "react";
 import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
-
+import styles from "./m3logo.module.scss";
 const M3Logo = () => {
-  return <img src={m3LogoImg} alt="M3 Academy logo" />;
+  return (
+    <img
+      className={styles["M3LogoImg"]}
+      src={m3LogoImg}
+      alt="M3 Academy logo"
+    />
+  );
 };
 
 export { M3Logo };

src/components/M3Logo/m3logo.module.scss

@@ -0,0 +1,6 @@
+.M3LogoImg {
+  width: 136px;
+  @media screen and (min-width: 2500px) {
+    width: 265px;
+  }
+}

src/components/NavigationBar/NavigationBar.tsx

@@ -4,10 +4,7 @@ import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
 import { Cart } from "../Cart/Cart";
 const NavigationBar = () => {
   return (
-    <nav
-      className="navbar navbar-expand-xpp bg-body-tertiary navbar-dark bg-dark"
-      id="navegador"
-    >
+    <nav className="navbar navbar-expand-xpp bg-body-tertiary " id="navegador">
       <div className="container-fluid">
         <button
           className="navbar-toggler"

src/pages/Home.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { NavigationBar } from "../components/NavigationBar/NavigationBar";
+import { Header } from "../sectors/Header/Header";
 
 const Home = () => {
-  //const style = { background: "black" };
   return (
-    <div /*style={style}*/>
-      <NavigationBar></NavigationBar>
+    <div>
+      <Header></Header>
     </div>
   );
 };

src/sectors/Header/BottomHeader/BottomHeader.tsx

@@ -0,0 +1,11 @@
+import { NavigationBar } from "../../../components/NavigationBar/NavigationBar";
+
+const BottomHeader = () => {
+  return (
+    <div className="bottom_header">
+      <NavigationBar></NavigationBar>
+    </div>
+  );
+};
+
+export { BottomHeader };

src/sectors/Header/Header.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { TopHeader } from "./TopHeader/TopHeader";
-
+import { BottomHeader } from "./BottomHeader/BottomHeader";
 const Header = () => {
   return (
     <header className="header">
       <TopHeader />
+      <BottomHeader></BottomHeader>
     </header>
   );
 };

src/sectors/Header/TopHeader/TopHeader.tsx

@@ -1,40 +1,21 @@
 import React from "react";
 import styles from "./styles.module.scss";
-import logoAcademy from "./assets/images/Logo-M3Academy 1.svg";
-import searchImg from "./assets/images/search_2.png";
-import cartImg from "./assets/images/cart_1.png";
+import { M3Logo } from "../../../components/M3Logo/M3Logo";
 
+import { SearchBox } from "../../../components/SearchBox/SearchBox";
+import { Enter } from "../../../components/Enter/Enter";
+import { Cart } from "../../../components/Cart/Cart";
 const TopHeader = () => {
   return (
-    <div className={styles["TopHeader"]}>
-      <img
-        className={styles["logoAcademyImg"]}
-        alt="LogoM3Academy"
-        src={logoAcademy}
-      />
-      <div className={styles["search-wrapper"]}>
-        <input
-          className={styles["search-input"]}
-          id="title-name"
-          name="title-name"
-          type="text"
-          placeholder="Buscar"
-          required
-        />
-        <button className={styles["buscaBtn"]}>
-          <img
-            className={styles["searchImg"]}
-            alt="LogoM3Academy"
-            src={searchImg}
-          />
-        </button>
+    <div className="top_header">
+      <M3Logo></M3Logo>
+      <div className="search_box">
+        <SearchBox></SearchBox>
+      </div>
+      <div className="sign_up">
+        <Enter></Enter>
+        <Cart></Cart>
       </div>
-      <a className={styles["loginLink"]} href="/">
-        ENTRAR
-      </a>
-      <a className={styles["cartLink"]} href="/">
-        <img className={styles["cartImg"]} src={cartImg} alt="ImagemCarrinho" />
-      </a>
     </div>
   );
 };

src/styles/main.scss

@@ -5,3 +5,5 @@
 @import "partials/container.scss";
 @import "utils/custom.scss";
 @import "partials/navigation.scss";
+@import "partials/top_header.scss";
+@import "partials/bottom_header.scss";

src/styles/partials/bottom_header.scss

@@ -0,0 +1,8 @@
+.bottom_header {
+  background: black;
+  padding: 0 100px 0 64px;
+  border-top: 1px solid #e5e5e5;
+  @media screen and (max-width: 1025px) {
+    padding: 0 16px 0 16px;
+  }
+}

src/styles/partials/header.scss

@@ -1,6 +1,4 @@
 .header {
   width: 100%;
-  height: 162px;
   background-color: $black100;
-  padding-top: 22px;
 }

src/styles/partials/navigation.scss

@@ -14,7 +14,34 @@
   color: white;
   font-size: 14px;
   font-weight: 500;
+  &:hover {
+    color: aqua;
+  }
+  .active {
+    color: aquamarine;
+  }
   @media screen and (min-width: 2500px) {
     font-size: 28px;
   }
 }
+.bottom_header {
+  background: black;
+}
+
+.navbar-toggler {
+  background-color: transparent;
+}
+.navbar-toggler-icon {
+  background-color: white;
+}
+.navbar-collapse {
+  background-color: white;
+  .nav-link {
+    color: black;
+  }
+}
+@media screen and (max-width: 1025px) {
+  .container-fluid {
+    padding: 0 0 0 0;
+  }
+}

src/styles/partials/top_header.scss

@@ -0,0 +1,15 @@
+.top_header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 auto;
+  padding: 22px 100px 22px 100px;
+  @media screen and (max-width: 1024px) {
+    display: none;
+  }
+}
+.sign_up {
+  display: flex;
+  flex-direction: row;
+  gap: 55px;
+}