feat(responsividade): Adiciona responsividade do header

src/components/Header.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import SearchBar from "./SearchBar";
 import Logo from "../assets/img/logoM3.png";
 import Cart from "../assets/img/Cart.png";
@@ -7,13 +8,9 @@ import HeaderLinks from "./HeaderLinks";
 import MenuMobile from "./menuMobile";
 
 const Header = () => {
-  const activeMenuMobile = async () => {
+  const [isActive, setIsActive] = useState(false);
-    const menu = document.querySelector(".page-header__menu-mobile");
+  const activeMenuMobile = () => {
-    if (menu?.classList.contains("active")) {
+    setIsActive(!isActive);
-      menu?.classList.remove("active");
-    } else {
-      menu?.classList.add("active");
-    }
   };
 
   return (
@@ -28,16 +25,23 @@ const Header = () => {
             >
               <img src={iconMenu} alt="" />
             </button>
-            <MenuMobile onClick={activeMenuMobile} />
+            <MenuMobile
+              className={
+                isActive
+                  ? "page-header__menu-mobile active"
+                  : "page-header__menu-mobile"
+              }
+              onClick={activeMenuMobile}
+            />
           </div>
-          <a href="/">
+          <a className="page-header__logo" href="/">
             <img src={Logo} alt="" />
           </a>
           <SearchBar />
           <div className="page-header__container-login">
             <Link link="/" text="ENTRAR" />
-            <a href="/" aria-label="Carrinho">
+            <a href="/" aria-label="Carrinho" className="page-header__cart">
-              <img src={Cart} alt="" className="page-header__cart" />
+              <img src={Cart} alt="" className="page-header__cart-image" />
             </a>
           </div>
         </div>

src/components/menuMobile.tsx

@@ -3,12 +3,13 @@ import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
 
 interface MenuMobileProps {
+  className: string;
   onClick: React.MouseEventHandler;
 }
 
 const MenuMobile = (props: MenuMobileProps) => {
   return (
-    <div className="page-header__menu-mobile">
+    <div className={props.className}>
       <div className="page-header__menu-mobile--container">
         <div className="page-header__menu-mobile--header">
           <Link link="/" text="ENTRAR" />

src/styles/header.scss

@@ -9,17 +9,24 @@
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
+    }
 
+    &__logo {
+        min-width: 136px;
+        width: 12.6%;
 
+        img {
+            width: 100%;
+        }
     }
 
     &__busca {
         position: relative;
-        width: 264px;
+        width: 24.45%;
     }
 
     &__busca-input {
-        width: 98.6%;
+        width: 100%;
         height: 32px;
         background: $white;
         border: 2px solid $gray-700;
@@ -42,7 +49,7 @@
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        right: 7px;
+        right: 16px;
         width: 18px;
     }
 
@@ -52,6 +59,14 @@
         gap: 55px;
     }
 
+    &__cart {
+        width: 28px;
+
+        &-image {
+            width: 100%;
+        }
+    }
+
     .link {
         font-weight: 400;
         font-size: 14px;
@@ -67,6 +82,10 @@
         display: flex;
         align-items: center;
         gap: 55px;
+
+        .link {
+            font-weight: 500;
+        }
     }
 
     &__menu-button {
@@ -128,7 +147,46 @@
         display: block;
     }
 
+    @media screen and (min-width: 2500px) {
+        &__container-top {
+            height: 103px;
+        }
 
+        &__logo {
+            min-width: 265px;
+            width: 11.5%;
+        }
+
+        &__busca {
+            width: 22.4%;
+        }
+
+        &__busca-input {
+            height: 57px;
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__busca-icon {
+            top: 50%;
+            transform: translateY(-50%);
+            right: 7px;
+            width: 35px;
+        }
+
+        &__cart {
+            width: 54px;
+        }
+
+        .link {
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__container-bottom {
+            height: 59px;
+        }
+    }
 
     @media screen and (min-width: 1025px) {
         &__container-top {

src/styles/reset.scss

@@ -2,4 +2,5 @@
     padding: 0;
     margin: 0;
     font-family: $font-family;
+    box-sizing: border-box;
 }