From b9715a091c70a063a668ba1127678a356ad41d7f Mon Sep 17 00:00:00 2001
From: v-giorgio <vitorlcardoso17@gmail.com>
Date: Sun, 11 Aug 2024 20:12:50 -0300
Subject: [PATCH] feat: adiciona responsiv navbar

---
 src/assets/fi_menu.png           | Bin 0 -> 186 bytes
 src/components/Navbar/index.jsx  |  79 +++++++++++++++++++++++++----
 src/components/Navbar/styles.css |  83 +++++++++++++++++++++++++++++--
 3 files changed, 149 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/fi_menu.png

diff --git a/src/assets/fi_menu.png b/src/assets/fi_menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..5dfdacccacc7455c8bd32fe28d6ebb2881420770
GIT binary patch
literal 186
zcmeAS@N?(olHy`uVBq!ia0vp^5<o1;!3HF?wco`8Db50q$YKTtZeb8+WSBJvq=K<H
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzQ3o7V@L(#+e;fc85DR}4v5Db;JxD#UU<3Z
z5l7yFjlzx_JeJmf_^`zDGlT7UUE6G>oRHo({8n#Fd}kchKfcIwgW`hdn2Vhad4;a(
cOuvpZZ0Qm({=hS50nlg$Pgg&ebxsLQ0JIS~D*ylh

literal 0
HcmV?d00001

diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index 761a6aa..d95efbc 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -1,13 +1,71 @@
+import { useState } from 'react';
 import './styles.css';
 import { Link } from 'react-router-dom';
 import logo from '../../assets/caronae-logo.png';
+import hamburgerBtn from '../../assets/fi_menu.png';
 
 export default function Navbar() {
+  const [toggleList, setToggleList] = useState(false);
+  const screenSize = window.screen.width;
+
   return (
-    <div className="container-navbar">
-      <img src={logo} className="navbar-logo" />
-      <div className="navbar-menu">
-        <div className="navbar-item">
+    <>
+    {screenSize > 1100 ?
+      <div className="container-navbar">
+        <img src={logo} className="navbar-logo" />
+        <div className="navbar-menu">
+          <div className="navbar-item">
+            <Link
+              style={{ textDecoration: 'none', color: 'black' }}
+              to="/"
+            >
+              Home
+            </Link>
+          </div>
+          <div className="navbar-item">
+            <Link
+              style={{ textDecoration: 'none', color: 'black' }}
+              to="/about"
+            >
+              Conheça o projeto
+            </Link>
+          </div>
+          <div className="navbar-item">
+            <Link
+              style={{ textDecoration: 'none', color: 'black' }}
+              to="/history"
+            >
+              Histórico
+            </Link>
+          </div>
+          <div className="navbar-item">
+            <Link
+              style={{ textDecoration: 'none', color: 'black' }}
+              to="/app"
+            >
+              Aplicativo
+            </Link>
+          </div>
+          <div className="navbar-item">
+            <Link
+              style={{ textDecoration: 'none', color: 'black' }}
+              to="/faq"
+            >
+              FAQ
+            </Link>
+          </div>
+        </div>
+        <button className="navbar-dl-button">Baixe o app</button>
+      </div>
+      :
+      <div className="container-navbar">
+        <img src={logo} className="navbar-logo" />
+        <img src={hamburgerBtn} className="navbar-hamb-btn" onClick={() => setToggleList(!toggleList)} />
+      </div>
+    }
+    {toggleList &&
+      <div className="toggle-menu-container">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/"
@@ -15,7 +73,7 @@ export default function Navbar() {
             Home
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/about"
@@ -23,7 +81,7 @@ export default function Navbar() {
             Conheça o projeto
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/history"
@@ -31,7 +89,7 @@ export default function Navbar() {
             Histórico
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/app"
@@ -39,7 +97,7 @@ export default function Navbar() {
             Aplicativo
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/faq"
@@ -47,8 +105,9 @@ export default function Navbar() {
             FAQ
           </Link>
         </div>
+        <button className="navbar-dl-button-toggle">Baixe o app</button>
       </div>
-      <button className="navbar-dl-button">Baixe o app</button>
-    </div>
+    }
+    </>
   );
 }
diff --git a/src/components/Navbar/styles.css b/src/components/Navbar/styles.css
index 2d0d04e..f3e8d5f 100644
--- a/src/components/Navbar/styles.css
+++ b/src/components/Navbar/styles.css
@@ -23,11 +23,13 @@
   position: relative;
 }
 
-.navbar-item:hover {
+.navbar-item:hover,
+.navbar-item-toggle {
   font-weight: 700;
 }
 
-.navbar-item:hover::after {
+.navbar-item:hover::after,
+.navbar-item-toggle:hover::after {
   position: absolute;
   bottom: -50%;
   left: 50%;
@@ -42,7 +44,8 @@
   background-color: #eb72ac;
 }
 
-.navbar-dl-button {
+.navbar-dl-button,
+.navbar-dl-button-toggle {
   display: inline-block;
   min-width: 121px;
   max-width: 121px;
@@ -72,3 +75,77 @@
 .navbar-dl-button:active {
   transform: scale(0.97);
 }
+
+.toggle-menu-container {
+  position: absolute;
+  width: 50%;
+  right: 0;
+  margin: 0 auto;
+  padding: 24px;
+  gap: 40px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  box-shadow: 
+        0px 2px 2px -2px rgba(0, 0, 0, 0.5),
+        inset 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
+}
+
+.navbar-item-toggle {
+  font-weight: 500;
+}
+
+.navbar-dl-button-toggle {
+  margin-right: -10px;
+}
+
+@media (max-width: 1500px) {
+  .container-navbar {
+    width: 100%;
+    margin: 0 auto;
+    justify-content: space-around;
+  }
+
+  .navbar-menu {
+    width: 50%;
+    flex-wrap: wrap;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .navbar-logo {
+    margin-left: 0px;
+    width: 20%;
+    height: 8%;
+  }
+
+  .navbar-dl-button {
+    margin-left: 0px;
+    margin-right: 0px;
+    min-width: 100px;
+    max-width: 100px;
+    max-height: 20px;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .container-navbar {
+    padding: 1% 0;
+  }
+
+  .toggle-menu-container {
+    width: 30%;
+  }
+}
+
+@media (max-width: 450px) {
+  .container-navbar {
+    width: 40%;
+  }
+
+  .toggle-menu-container {
+    width: 60%;
+  }
+}
\ No newline at end of file