From 22419b239768d66779df267cfd1641405576f18d Mon Sep 17 00:00:00 2001
From: MateusLopes <mateus20.lopes02@gmail.com>
Date: Mon, 2 Jan 2023 23:29:34 -0300
Subject: [PATCH] feat: header responsivo telas 4k

---
 src/assets/svgs/icon-close.svg    |  4 ++
 src/components/header/Header.tsx  | 27 +++++----
 src/components/header/header.scss | 98 +++++++++++++++++++++++++++----
 3 files changed, 104 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/svgs/icon-close.svg

diff --git a/src/assets/svgs/icon-close.svg b/src/assets/svgs/icon-close.svg
new file mode 100644
index 0000000..e0e6d36
--- /dev/null
+++ b/src/assets/svgs/icon-close.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
+<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
+</svg>
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 9ab38d9..9c890da 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -2,6 +2,7 @@ import './header.scss'
 import iconCart from '../../assets/svgs/icon-cart.svg';
 import iconLupa from '../../assets/svgs/icon-lupa.svg';
 import iconMenu from '../../assets/svgs/icon-menu.svg';
+import iconClose  from '../../assets/svgs/icon-close.svg';
 import logoM3Academy from '../../assets/imgs/logo-m3-academy.png';
 
 const Header = () => {
@@ -22,18 +23,20 @@ const Header = () => {
         </div>
       </header>
 
-      <nav>
-        <ul>
-          <li>
-            <a href="/cursos">Cursos</a>
-          </li>
-          <li>
-            <a href="/saiba-mais">Sabia mais</a>
-          </li>
-          <li>
-            <a href="/institucionais">Insititucionais</a>
-          </li>
-        </ul>
+      <nav className=''>
+        <div className="menu">
+          <ul>
+            <li>
+              <a href="/cursos">Cursos</a>
+            </li>
+            <li>
+              <a href="/saiba-mais">Sabia mais</a>
+            </li>
+            <li>
+              <a href="/institucionais">Insititucionais</a>
+            </li>
+          </ul>
+        </div>
       </nav>
     </>
   )
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
index 3104cd4..a66a338 100644
--- a/src/components/header/header.scss
+++ b/src/components/header/header.scss
@@ -4,13 +4,6 @@ header,
 ul {
     display: flex;
     align-items: center;
-
-    @media (max-width: 1024px) {
-        display: grid;
-        grid-template-areas:
-            "menu logo cart"
-            "input input input";
-    }
 }
 
 header {
@@ -21,6 +14,10 @@ header {
 
     @media (max-width: 1024px) {
         padding: 25px 16px;
+        display: grid;
+        grid-template-areas:
+            "menu logo cart"
+            "input input input";
     }
 
     .menu-mobile {
@@ -41,6 +38,11 @@ header {
             grid-area: logo;
             margin: 0 auto;
         }
+
+        @media (min-width: 2500px) {
+            width: 265.62px;
+            height: 50.5px;
+        }
     }
 
     .search-bar {
@@ -53,12 +55,16 @@ header {
             margin-top: 25px;
         }
 
+        @media (min-width: 2500px) {
+            height: 57px;
+            width: 22.3914%;
+        }
+
         .search-input {
             width: 100%;
             padding: 8px 16px;
             border: 2px solid $color-gray-700;
             border-radius: 5px;
-
             color: $color-gray-500;
             font-family: $font-family-Roboto;
             font-weight: 400;
@@ -71,6 +77,11 @@ header {
                 font-weight: 400;
                 font-size: 14px;
                 line-height: 16.41px;
+
+                @media (min-width: 2500px) {
+                    font-size: 28px;
+                    line-height: 32.81px;
+                }
             }
 
             &:focus {
@@ -80,6 +91,13 @@ header {
             @media (max-width: 1024px) {
                 padding: 8px 16px;
             }
+
+            @media (min-width: 2500px) {
+                height: inherit;
+                padding: 12px 16px;
+                font-size: 28px;
+                line-height: 32.81px;
+            }
         }
 
         .icon-lupa {
@@ -88,6 +106,12 @@ header {
             top: -27px;
             float: right;
             margin-right: 18px;
+
+            @media (min-width: 2500px) {
+                height: 35.15px;
+                width: 35.15px;
+                top: -46px;
+            }
         }
     }
 
@@ -107,12 +131,29 @@ header {
             color: $color-white;
             font-style: normal;
             font-weight: 400;
-
             font-size: 14px;
             line-height: 16px;
 
-            @media (max-width: 1024px) {
-                display: none;
+            @media (min-width: 2500px) {
+                font-size: 28px;
+                line-height: 32.81px;
+            }
+
+            &.active {
+                display: block;
+                position: absolute;
+                left: 0;
+                z-index: 1;
+                width: 96.485%;
+                background: black;
+                padding: 31px 0 31px 16px;
+            }
+        }
+
+        .icon-cart {
+            @media (min-width: 2500px) {
+                height: 54.68px;
+                width: 54.68px;
             }
         }
     }
@@ -122,8 +163,34 @@ nav {
     background-color: $color-black;
     padding: 14px 100px;
 
-    @media (max-width: 1024px) {
-        display: none;
+    // @media (max-width: 1024px) {
+    //     display: none;
+    // }
+
+    &.active {
+        display: block;
+
+        .menu {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: $color-white;
+
+            ul {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 12px;
+                width: 96.485%;
+                background: #525251;
+                padding: 31px 0 404px 16px;
+                margin-top: 78px;
+                li a {
+                    color: $color-gray-600;
+                }
+            }
+        }
     }
 
     ul {
@@ -139,6 +206,11 @@ nav {
 
             font-size: 14px;
             line-height: 16px;
+
+            @media (min-width: 2500px) {
+                font-size: 28px;
+                line-height: 32.81px;
+            }
         }
     }
 }