From e196bc978f3fb56db52c796c1059ed2ea1c975ce Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Fri, 20 Jan 2023 19:33:16 -0300
Subject: [PATCH] feat: adiciona header da pagina

---
 .../src/components/Header/index.scss          | 188 ++++++++++++++++++
 .../src/components/Header/index.tsx           | 116 +++++++++++
 2 files changed, 304 insertions(+)
 create mode 100644 Vitor-Soares-main/src/components/Header/index.scss
 create mode 100644 Vitor-Soares-main/src/components/Header/index.tsx

diff --git a/Vitor-Soares-main/src/components/Header/index.scss b/Vitor-Soares-main/src/components/Header/index.scss
new file mode 100644
index 0000000..6fa0db1
--- /dev/null
+++ b/Vitor-Soares-main/src/components/Header/index.scss
@@ -0,0 +1,188 @@
+@import "../../styles/index.scss";
+
+// @import "../../styles/mixins.scss";
+
+@mixin hiden() {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: all;
+}
+
+@mixin visible() {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: all;
+}
+
+.header {
+  @include large-font-4();
+  @include button-reset();
+
+  .logo {
+    width: max-content !important;
+    height: 50px;
+    img {
+      height: 100%;
+    }
+  }
+
+  gap: 16px;
+
+  color: $text-cl-1;
+  background: $panel-bg-1;
+
+  .top {
+    padding-block: 22px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    justify-items: center;
+
+    .icons {
+      display: flex;
+      align-items: center;
+      gap: 55px;
+    }
+  }
+
+  .bottom {
+    padding-block: 14px;
+  }
+
+  .top,
+  .bottom {
+    padding-inline: $large-padding-inline;
+  }
+
+  .entrar {
+    text-transform: uppercase;
+  }
+  .comprar {
+    height: 54.68px;
+    img {
+      height: inherit;
+    }
+  }
+
+  nav {
+    border-top: solid 1px $border-cl-2;
+    font-weight: 500;
+    color: $text-cl-1;
+    grid-column: 1 / -1;
+    white-space: nowrap;
+    font-weight: 500;
+
+    ul {
+      list-style-type: none;
+      display: flex;
+      gap: 55px;
+    }
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  @media screen {
+    @media (max-width: 2500px) {
+      @include big-font-4();
+      .logo {
+        height: 26px;
+      }
+      .comprar {
+        height: 28px;
+      }
+      .search-box {
+        width: 264px;
+        height: 32px;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      display: grid;
+      gap: 25px;
+      padding-block: 25px;
+
+      .top,
+      .bottom {
+        padding-inline: $big-padding-inline;
+        padding-block: 0;
+      }
+
+      .search-box {
+        width: 100%;
+        padding-block: 10px;
+        height: 36px;
+      }
+
+      nav {
+        border: none;
+      }
+
+      .hamburguer {
+        .overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: $overlay-bg;
+          z-index: 99;
+          width: 100vw;
+          height: 100vh;
+        }
+
+        .content {
+          position: absolute;
+          top: 0;
+          left: 0;
+
+          max-width: 988px;
+          width: 100%;
+          height: 585px;
+          z-index: 100;
+          background: #fff;
+
+          transition: all 0.25s 0s;
+
+          nav {
+            color: $text-cl-5;
+            width: 100%;
+            height: 100%;
+            padding: 31px $big-padding-inline;
+            ul {
+              flex-direction: column;
+              gap: 12px;
+            }
+          }
+
+          &.hide {
+            transform: translateX(-100%);
+            opacity: 1;
+          }
+
+          header {
+            background: $panel-bg-1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 31px $big-padding-inline;
+
+            button {
+              @include center;
+            }
+          }
+        }
+      }
+
+      .hide {
+        @include hiden();
+      }
+    }
+
+    @media (max-width: 375px) {
+      .hamburguer .content {
+        max-width: 339px;
+      }
+    }
+  }
+}
diff --git a/Vitor-Soares-main/src/components/Header/index.tsx b/Vitor-Soares-main/src/components/Header/index.tsx
new file mode 100644
index 0000000..780c7db
--- /dev/null
+++ b/Vitor-Soares-main/src/components/Header/index.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import cart from "../icons/Cart.svg";
+import closeBtn from "../icons/CloseBtn.svg";
+import hamburguer from "../icons/Hamburguer.svg";
+import logo from "../icons/M3Academy.png";
+
+import { Link } from "react-router-dom";
+import { SearchBox } from "../SearchBox";
+import "./index.scss";
+
+export function Header() {
+  const [move, setMove] = useState<boolean>(false);
+  const [asideOpen, setAsideOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    function calc() {
+      const { innerWidth: width, innerHeight: height } = window;
+      if (width <= 1024) {
+        setMove(true);
+      } else {
+        setMove(false);
+        setAsideOpen(false);
+      }
+    }
+
+    window.addEventListener("resize", calc);
+    calc();
+  }, []);
+
+  if (!move)
+    return (
+      <header className="header">
+        <div className="top">
+          <Link to="/" className="logo">
+            <img src={logo} alt="page logo" />
+          </Link>
+          <SearchBox />
+
+          <div className="icons">
+            <Link to="#" className="entrar">
+              <span>Entrar</span>
+            </Link>
+
+            <Link to="#" className="comprar">
+              <img src={cart} alt="cart icon" />
+            </Link>
+          </div>
+        </div>
+        <nav className="nav bottom">
+          <ul>
+            <li>
+              <Link to={"#"}>CURSOS</Link>
+            </li>
+            <li>
+              <Link to={"#"}>SAIBA MAIS</Link>
+            </li>
+            <li>
+              <Link to={"/institucional"}>INSTITUCIONAIS</Link>
+            </li>
+          </ul>
+        </nav>
+      </header>
+    );
+  else
+    return (
+      <header className="header">
+        <div className="top">
+          <div className={`hamburguer ${asideOpen ? "open" : ""}`}>
+            <button onClick={setAsideOpen.bind(null, true)}>
+              <img src={hamburguer} alt="Hamburguer icon" />
+            </button>
+            <div className={`overlay ${!asideOpen ? "hide" : ""}`}></div>
+            <div className={`content ${!asideOpen ? "hide" : ""}`}>
+              <header>
+                <Link to="#" className="entrar">
+                  Entrar
+                </Link>
+
+                <button
+                  onClick={setAsideOpen.bind(null, false)}
+                  className="close"
+                >
+                  <img src={closeBtn} alt="close button icon" />
+                </button>
+              </header>
+
+              <nav className="nav">
+                <ul>
+                  <li>
+                    <Link to={"#"}>CURSOS</Link>
+                  </li>
+                  <li>
+                    <Link to={"#"}>SAIBA MAIS</Link>
+                  </li>
+                  <li onClick={setAsideOpen.bind(null, false)}>
+                    <Link to={"/institucional"}>INSTITUCIONAIS</Link>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <Link to="/" className="logo">
+            <img src={logo} alt="page logo" />
+          </Link>
+          <div className="icons">
+            <Link to="/cart" className="comprar">
+              <img src={cart} alt="cart icon" />
+            </Link>
+          </div>
+        </div>
+        <div className="bottom">
+          <SearchBox />
+        </div>
+      </header>
+    );
+}