Merge pull request #41 from caronae/feat/car-16

feat: adiciona responsiv navbar
caronae · Aug 12, 2024 · 846e584 · 846e584
2 parents c9c6ffa + b9715a0
commit 846e584
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 13 deletions.
diff --git a/src/assets/fi_menu.png b/src/assets/fi_menu.png
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
@@ -1,54 +1,113 @@
+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="/"
           >
             Home
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/about"
           >
             Conheça o projeto
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/history"
           >
             Histórico
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/app"
           >
             Aplicativo
           </Link>
         </div>
-        <div className="navbar-item">
+        <div className="navbar-item-toggle">
           <Link
             style={{ textDecoration: 'none', color: 'black' }}
             to="/faq"
           >
             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
@@ -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%;
+  }
+}