feat(header): adicionando possibilidade do menu para tablet e mobile fechar ao clicar fora do ícone

src/components/Header/Header.scss

@@ -17,56 +17,6 @@ header {
     @media (max-width: 376px) {
         height: 139.01px;
     }
-    & .Checkbox {
-        display: none;
-    }
-    .Checkbox:checked ~ .Header__Bottom {
-        @media (max-width: 1025px) {
-            width: 100%;
-            height: 100%;
-            transform: translateX(0);
-            transition: 0.5s ease-in-out;
-            background: rgba(69, 69, 69, 0.7);
-            border-top-width: 0px;
-        }
-    }
-    .Checkbox:checked ~ .Header__Bottom > .Nav__Bar {
-        @media (max-width: 1025px) {
-            width: 96.462%;
-            max-height: 585px;
-            transform: translateX(0);
-            transition: 0.5s ease-in-out;
-            background: $white;
-            position: relative;
-            right: 18px;
-        }
-        @media (max-width: 376px) {
-            width: 90.22%;
-        }
-    }
-    .Checkbox:checked ~ .Header__Bottom > .Nav__Bar > ul {
-        @media (max-width: 1025px) {
-            position: relative;
-            left: 16px;
-            row-gap: 12px;
-        }       
-    }
-    .Checkbox:checked ~ .Header__Top > .Menu__Header__Top > .List__Login {
-        @media (max-width: 1025px) {
-            width: 99.573%;
-            left: -16px;
-            transform: translateX(0);
-            transition: 0.5s ease-in-out;
-        }
-        @media (max-width: 376px) {
-            width: 98.62%;
-        }
-    }
-    .Checkbox:checked ~ .Label__Menu .Icon__Content {
-        @media (max-width: 1025px) {
-            border-top-color: transparent;
-        }
-    }
 }
 
 //Header Content Top
@@ -90,28 +40,28 @@ header {
     @media (max-width: 376px) {
         width: 91.484%;
     }
-    .Label__Menu {
+    .Icon__Content {
+        background: transparent;
+        border: 0;
+        padding: 0;
+        @media (max-width: 1025px) {
+            width: 28px;
+            height: 22.5px;
+            display: block;
+        }
         @media (min-width: 1026px) {
             display: none;
         }
-        .Icon__Content {
+        & .Icon__Menu {
             @media (max-width: 1025px) {
                 width: 28px;
                 height: 22.5px;
-                display: block;
             }
-
-            & .Icon__Menu {
-                @media (max-width: 1025px) {
-                    width: 28px;
-                    height: 22.5px;
-                }
-            }
-            & .Icon__Menu__Closed {
-                @media (max-width: 1025px) {
-                    width: 15px;
-                    height: 15px;
-                }
+        }
+        & .Icon__Menu__Closed {
+            @media (max-width: 1025px) {
+                width: 15px;
+                height: 15px;
             }
         }
     }
@@ -132,7 +82,7 @@ header {
         }
         @media (max-width: 1023px) and (min-width: 377px) {
             width: auto;
-            height: 25.87px; 
+            height: 25.87px;
         }
         @media (max-width: 376px) {
             width: 39.563%;
@@ -195,7 +145,7 @@ header {
         @media (max-width: 376px) {
             width: calc(100% - 64.71px);
         }
-        
+
         &::placeholder {
             font-family: "Roboto";
             font-style: normal;
@@ -276,6 +226,17 @@ header {
                 }
             }
         }
+        & .List__Login.opened {
+            @media (max-width: 1025px) {
+                width: 99.573%;
+                left: -16px;
+                transform: translateX(0);
+                transition: 0.5s ease-in-out;
+            }
+            @media (max-width: 376px) {
+                width: 98.62%;
+            }
+        }
         & .List__Cart {
             display: flex;
             align-items: center;
@@ -383,4 +344,33 @@ header {
             }
         }
     }
+    .Nav__Bar.opened {
+        @media (max-width: 1025px) {
+            width: 96.462%;
+            max-height: 585px;
+            transform: translateX(0);
+            transition: 0.5s ease-in-out;
+            background: $white;
+            position: relative;
+            right: 18px;
+        }
+        @media (max-width: 376px) {
+            width: 90.22%;
+        }
+        ul {
+            position: relative;
+            left: 16px;
+            row-gap: 12px;
+        }
+    }
+}
+.Header__Bottom.opened {
+    @media (max-width: 1025px) {
+        width: 100%;
+        height: 100%;
+        transform: translateX(0);
+        transition: 0.5s ease-in-out;
+        background: rgba(69, 69, 69, 0.7);
+        border-top-width: 0px;
+    }
 }

src/components/Header/Header.tsx

@@ -1,23 +1,23 @@
 import { HeaderContentTop } from "./HeaderContentTop";
 import "./Header.scss";
 import { HeaderContentBottom } from "./HeaderContentBottom";
+import {useState} from "react";
 import Icon__Menu from "../../assets/imgs/IconMenu.svg";
 
 const Header = () => {
+
+
+  const [menuIsVisible, setMenuIsVisible]= useState(false);
+
   return (
     <header>
-      <input type="checkbox" id="Checkbox" className="Checkbox" />
       <ul className="Header__Top">
-        <label htmlFor="Checkbox" className="Label__Menu">
-          <span className="Icon__Content">
+          <button className="Icon__Content" onClick={() => setMenuIsVisible(true)}>
             <img src={Icon__Menu} alt="ícone de menu" className="Icon__Menu" />
-          </span>
-        </label>
-        <HeaderContentTop />
-      </ul>
-      <div className="Header__Bottom">
-        <HeaderContentBottom />
-      </div>
+          </button>
+        <HeaderContentTop  menuIsVisible={menuIsVisible} setMenuIsVisible={setMenuIsVisible}/>
+      </ul>     
+        <HeaderContentBottom menuIsVisible={menuIsVisible} setMenuIsVisible={setMenuIsVisible}/>  
     </header>
   );
 };

src/components/Header/HeaderContentBottom.tsx

@@ -1,9 +1,17 @@
 import "./Header.scss"
-const HeaderContentBottom = () => {
+import React from "react";
+
+interface HeaderContentProps {
+  menuIsVisible: boolean;
+  setMenuIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const HeaderContentBottom = ({menuIsVisible,setMenuIsVisible}: HeaderContentProps) => {
   return (
     <>
-      <nav className="Nav__Bar">
-        <ul>
+    <div className={`Header__Bottom ${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)}  >
+      <nav className={`Nav__Bar ${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)} >
+        <ul className={`${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)}>
           <li>
             <a href="/">Cursos</a>
           </li>
@@ -15,6 +23,7 @@ const HeaderContentBottom = () => {
           </li>
         </ul>
       </nav>
+    </div>
     </>
   );
 };

src/components/Header/HeaderContentTop.tsx

@@ -4,7 +4,12 @@ import Logo from "../../assets/imgs/logom3.svg";
 import Cart from "../../assets/imgs/cart.svg";
 import Icon__Menu__Closed from "../../assets/imgs/IconMenuClosed.svg";
 
-const HeaderContentTop = () => {
+interface HeaderContentProps {
+  menuIsVisible: boolean;
+  setMenuIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const HeaderContentTop = ({menuIsVisible,setMenuIsVisible}: HeaderContentProps) => {
   const [search, setSearch]: [string, (search: string) => void] =
     React.useState("");
 
@@ -25,18 +30,11 @@ const HeaderContentTop = () => {
         }
       ></input>
       <ul className="Menu__Header__Top">
-        <li className="List__Login">
+        <li className={`List__Login ${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)}>
           <a href="/">Entrar</a>
-          <input type="checkbox" id="Checkbox" className="Checkbox closed" />
-          <label htmlFor="Checkbox" className="Label__Menu">
-            <span className="Icon__Content closed">
-              <img
-                src={Icon__Menu__Closed}
-                alt="ícone do menu pra fechar"
-                className="Icon__Menu__Closed"
-              />
-            </span>
-          </label>
+            <button className="Icon__Content closed" onClick={() => setMenuIsVisible(false)}>
+              <img src={Icon__Menu__Closed} alt="ícone do menu pra fechar" className="Icon__Menu__Closed"/>
+            </button>
         </li>
         <li className="List__Cart">
           <a href="/" className="cart__content--link">