From 53d8bc6971ac84cf5d081ad97f995be09fb5f89a Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Sat, 7 Jan 2023 22:26:50 -0300
Subject: [PATCH] =?UTF-8?q?feat(header):=20Cria=20a=20barra=20de=20navega?=
 =?UTF-8?q?=C3=A7=C3=A3o=20do=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HeaderNavBar/HeaderNavBar.module.scss     | 43 +++++++++++++++++++
 src/components/HeaderNavBar/HeaderNavBar.tsx  | 20 +++++++++
 .../ItemNavBar/ItemNavBar.module.scss         | 29 +++++++++++++
 src/components/ItemNavBar/ItemNavBar.tsx      | 10 +++++
 4 files changed, 102 insertions(+)
 create mode 100644 src/components/HeaderNavBar/HeaderNavBar.module.scss
 create mode 100644 src/components/HeaderNavBar/HeaderNavBar.tsx
 create mode 100644 src/components/ItemNavBar/ItemNavBar.module.scss
 create mode 100644 src/components/ItemNavBar/ItemNavBar.tsx

diff --git a/src/components/HeaderNavBar/HeaderNavBar.module.scss b/src/components/HeaderNavBar/HeaderNavBar.module.scss
new file mode 100644
index 0000000..6361cc0
--- /dev/null
+++ b/src/components/HeaderNavBar/HeaderNavBar.module.scss
@@ -0,0 +1,43 @@
+@use '../../variables';
+
+.header-nav-bar {
+    height: 44px;
+
+    @media (min-width: 3600px) {
+        height: 70px;
+    }
+
+    @media ((min-width: 2500px) and (max-width: 3599px)){
+        height: 61px;
+    }
+
+    @media (max-width: 1024px) {
+        height: 0;
+    }
+
+    &__ul {
+        display: flex;
+        align-items: center;
+        text-transform: none;
+        padding: 14px 100px;
+        height: 44px;
+        gap: 55px;
+    
+        @media (min-width: 3600px) {
+            height: 70px;
+        }
+    
+        @media ((min-width: 2500px) and (max-width: 3599px)){
+            height: 61px;
+        }
+
+        @media (max-width: 1024px) {
+            flex-direction: column;
+            align-items: flex-start;
+            background-color: variables.$white;
+            height: 507px;
+            padding: 31px 16px;
+            gap: 0;
+        }
+    }
+}
diff --git a/src/components/HeaderNavBar/HeaderNavBar.tsx b/src/components/HeaderNavBar/HeaderNavBar.tsx
new file mode 100644
index 0000000..54811a7
--- /dev/null
+++ b/src/components/HeaderNavBar/HeaderNavBar.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from "./HeaderNavBar.module.scss";
+
+import { ItemNavBar } from '../ItemNavBar/ItemNavBar';
+
+const HeaderNavBar = () => {
+
+    return (
+        <nav className={styles["header-nav-bar"]}>
+            <ul className={styles["header-nav-bar__ul"]}>
+               <ItemNavBar text="cursos" />
+               <ItemNavBar text="Saiba mais" />
+               <ItemNavBar text="Institucionais" />
+            </ul>
+        </nav>
+    );
+}
+
+export {HeaderNavBar};
diff --git a/src/components/ItemNavBar/ItemNavBar.module.scss b/src/components/ItemNavBar/ItemNavBar.module.scss
new file mode 100644
index 0000000..1f5b977
--- /dev/null
+++ b/src/components/ItemNavBar/ItemNavBar.module.scss
@@ -0,0 +1,29 @@
+@use '../../variables';
+
+.nav-bar__item {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: variables.$white;
+    cursor: pointer;
+
+    @media (min-width: 3600px) {
+        font-size: 32px;
+        line-height: 38px;
+    }
+
+    @media ((min-width: 2500px) and (max-width: 3599px)) {
+        font-size: 28px;
+        line-height: 33px;
+    }
+
+    @media (max-width: 1024px) {
+        color: variables.$gray-400;
+        margin-bottom: 12px;
+    }
+
+    &:hover {
+        filter: brightness(80%);
+    }
+}
diff --git a/src/components/ItemNavBar/ItemNavBar.tsx b/src/components/ItemNavBar/ItemNavBar.tsx
new file mode 100644
index 0000000..7d37cf7
--- /dev/null
+++ b/src/components/ItemNavBar/ItemNavBar.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import styles from "./ItemNavBar.module.scss";
+
+const ItemNavBar = ( props:any) => {
+    const { text } = props;
+    return <li className={styles["nav-bar__item"]}> { text } </li>;
+};
+
+export { ItemNavBar };