fixed mobile menu close after click at nav link

Green-Cycle · Jun 3, 2024 · fbd437d · fbd437d
1 parent 9d6faa2
commit fbd437d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/Frontend/src/components/Header.jsx b/Frontend/src/components/Header.jsx
@@ -57,7 +57,7 @@ function Header() {
   };
 
   const toggleCart = () => {
-    console.log(calculateTotalItems(cartItems))
+    console.log(calculateTotalItems(cartItems));
     setIsCartOpen((prevState) => !prevState);
   };
 
@@ -91,13 +91,17 @@ function Header() {
           {!isLoginPage && !isRegisterPage && isLoggedIn && (
             <>
               {' '}
-              <button onClick={toggleCart} style={{position: 'relative'}}>
+              <button onClick={toggleCart} style={{ position: 'relative' }}>
                 <img
                   src='/assets/shopping_bag.svg'
                   alt='account icon'
                   className='account-icon'
                 />
-                {calculateTotalItems(cartItems) !==0 && <div className='header__cart-quantity'><p>{calculateTotalItems(cartItems)}</p></div>}
+                {calculateTotalItems(cartItems) !== 0 && (
+                  <div className='header__cart-quantity'>
+                    <p>{calculateTotalItems(cartItems)}</p>
+                  </div>
+                )}
               </button>
               <button
                 className='header__user-button'
@@ -162,8 +166,8 @@ function Header() {
       </div>
       <Nav />
       <div className={menuOpen ? 'header__menu_open' : 'header__menu'}>
-        <Search menuOpen={menuOpen} />
-        <Nav menuOpen={menuOpen} />
+        <Search menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
+        <Nav menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
       </div>{' '}
       {isCartOpen && (
         <Cart

diff --git a/Frontend/src/components/Nav.jsx b/Frontend/src/components/Nav.jsx
@@ -1,32 +1,42 @@
 import './Nav.css';
-import { Link } from 'react-router-dom';
-function Nav({ menuOpen }) {
-  const handleClick = () => {
+import { Link, useNavigate } from 'react-router-dom';
+function Nav({ menuOpen, setMenuOpen }) {
+  const navigate = useNavigate();
+
+  const handleClick = (path) => {
+    setMenuOpen(false);
+    navigate(path);
+  };
+
+  const handleScrollToFooter = () => {
+    setMenuOpen(false);
     const footer = document.getElementById('footer');
-    footer.scrollIntoView({ behavior: 'smooth' });
+    if (footer) {
+      footer.scrollIntoView({ behavior: 'smooth' });
+    }
   };
   return (
     <nav>
       <ul className={menuOpen ? 'header__hamburger' : 'nav'}>
         <li className='nav__li'>
-          <Link className='nav__link' to={'/store'}>
+          <button className='nav__link' onClick={() => handleClick('/store')}>
             LOJA
-          </Link>
+          </button>
         </li>
         <li className='nav__li'>
-          <Link className='nav__link' to={'/sobre'}>
+          <button className='nav__link' onClick={() => handleClick('/sobre')}>
             SOBRE
-          </Link>
+          </button>
         </li>
         <li className='nav__li'>
-          <Link className='nav__link' to={'/maps'}>
+          <button className='nav__link' onClick={() => handleClick('/maps')}>
             PONTOS DE COLETA
-          </Link>
+          </button>
         </li>
         <li className='nav__li'>
-          <a onClick={handleClick} className='nav__link'>
+          <button className='nav__link' onClick={handleScrollToFooter}>
             CONTATO
-          </a>
+          </button>
         </li>
       </ul>
     </nav>

diff --git a/Frontend/src/components/Search.jsx b/Frontend/src/components/Search.jsx
@@ -2,7 +2,7 @@ import './Search.css';
 import { useState } from 'react';
 import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
 
-function Search({ menuOpen }) {
+function Search({ menuOpen, setMenuOpen }) {
   const [searchParams, setSearchParams] = useSearchParams({ q: '' });
   const navigate = useNavigate();
   const [searchFile, setSearchFile] = useState('');
@@ -17,6 +17,7 @@ function Search({ menuOpen }) {
     setSearchParams('q', searchFile);
     navigate(`/store?q=${searchFile}`);
     setSearchFile('');
+    setMenuOpen(false);
   };
   return (
     <div className={menuOpen ? 'header__hamburger' : 'search-container'}>