fix: close navbar on clicking outside (#788)

Co-authored-by: Tamal Das <[email protected]>
ngoworldcommunity · Jun 2, 2023 · 9a3f2ab · 9a3f2ab
1 parent 2ad7bf7
commit 9a3f2ab
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 98 deletions.
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -202,11 +202,10 @@ const Footer = () => {
                   href="https://github.com/IAmTamal/Milan"
                   target="_blank"
                   rel="noreferrer"
-                className="underline-animation"
+                  className="underline-animation"
                 >
                   here
                 </a>
-
               </p>
             )}
           </div>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -9,13 +9,15 @@ import Modal from "./Modal";
 import { FaBars } from "react-icons/fa";
 import { IoMdClose } from "react-icons/io";
 import Button from "./Button";
+import ClickAwayListener from "../utils/clickAwayListener";
 
 const Navbar = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { isSignUpModalOpen, toggleSignUpModal } = useContext(MilanContext);
   const { isSignInModalOpen, toggleSignInModal } = useContext(MilanContext);
-  const { isNavbarOpen, toggleNavbar } = useContext(MilanContext);
+  const { isNavbarOpen, setIsNavbarOpen, toggleNavbar } =
+    useContext(MilanContext);
 
   const handleNavigate = () => {
     if (Cookies.get("token")) {
@@ -35,108 +37,114 @@ const Navbar = () => {
 
   return (
     <>
-      <nav className="navbar navbar-expand-lg navbar-light sticky-top navbar_main ">
-        <div className="container">
-          <Link className="nav_brand_parent" to={"/"}>
-            <img
-              src={
-                solidarity ||
-                "https://www.shareicon.net/data/512x512/2016/09/15/829452_user_512x512.png"
-              }
-              alt="Milan-logo"
-              className="nav_brand_img"
-            /> <span className="nav_brand_name">MILAN</span>
-          </Link>
+      <ClickAwayListener onClickAway={() => setIsNavbarOpen(false)}>
+        <nav className="navbar navbar-expand-lg navbar-light sticky-top navbar_main ">
+          <div className="container">
+            <Link className="nav_brand_parent" to={"/"}>
+              <img
+                src={
+                  solidarity ||
+                  "https://www.shareicon.net/data/512x512/2016/09/15/829452_user_512x512.png"
+                }
+                alt="Milan-logo"
+                className="nav_brand_img"
+              />{" "}
+              <span className="nav_brand_name">MILAN</span>
+            </Link>
 
-          <button
-            className="navbar-toggler"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-            onClick={() => toggleNavbar()}
-          >
-            {isNavbarOpen ? <IoMdClose /> : <FaBars />}
-          </button>
+            <button
+              className="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+              onClick={() => toggleNavbar()}
+            >
+              {isNavbarOpen ? <IoMdClose /> : <FaBars />}
+            </button>
 
-          <div
-            className={`collapse navbar-collapse ${isNavbarOpen ? "show" : ""}`}
-            id="navbarSupportedContent"
-          >
-            <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
-              <li className="nav-item home">
-                <Link to={"/"}>Home</Link>
-                <div
-                  className={
-                    "" + (location.pathname === "/" ? "active-link" : "")
-                  }
-                ></div>
-              </li>
+            <div
+              className={`collapse navbar-collapse ${
+                isNavbarOpen ? "show" : ""
+              }`}
+              id="navbarSupportedContent"
+            >
+              <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
+                <li className="nav-item home">
+                  <Link to={"/"}>Home</Link>
+                  <div
+                    className={
+                      "" + (location.pathname === "/" ? "active-link" : "")
+                    }
+                  ></div>
+                </li>
 
-              <li className="nav-item home">
-                <Link to={"/clubs"}>Clubs</Link>
-                <div
-                  className={
-                    "" + (location.pathname === "/clubs" ? "active-link" : "")
-                  }
-                ></div>
-              </li>
+                <li className="nav-item home">
+                  <Link to={"/clubs"}>Clubs</Link>
+                  <div
+                    className={
+                      "" + (location.pathname === "/clubs" ? "active-link" : "")
+                    }
+                  ></div>
+                </li>
 
-              <li className="nav-item home">
-                <Link to="/events">Events</Link>
-                <div
-                  className={
-                    "" + (location.pathname === "/events" ? "active-link" : "")
-                  }
-                ></div>
-              </li>
+                <li className="nav-item home">
+                  <Link to="/events">Events</Link>
+                  <div
+                    className={
+                      "" +
+                      (location.pathname === "/events" ? "active-link" : "")
+                    }
+                  ></div>
+                </li>
 
-              <li className="nav-item home">
-                <Link to="/shop">Shop</Link>
-                <div
-                  className={
-                    "" + (location.pathname === "/shop" ? "active-link" : "")
-                  }
-                ></div>
-              </li>
-            </ul>
-            <div className="nav-buttons">
-              {Cookies.get("token") || Cookies.get("club") ? (
-                <img
-                  onClick={handleNavigate}
-                  src={ProfilePicture}
-                  alt="lol"
-                  className="nav_user_img"
-                />
-              ) : (
-                <>
-                  <div className="nav-item home">
-                    <Button
-                      size="sm"
-                      variant="outlined"
-                      className=" nav_signin_btn"
-                      onClick={toggleSignInModal}
-                    >
-                      Sign in
-                    </Button>
-                  </div>
-                  <div className="nav-item home">
-                    <Button
-                      size="sm"
-                      className=" nav_signup_btn"
-                      onClick={toggleSignUpModal}
-                    >
-                      Sign up
-                    </Button>
-                  </div>
-                </>
-              )}
+                <li className="nav-item home">
+                  <Link to="/shop">Shop</Link>
+                  <div
+                    className={
+                      "" + (location.pathname === "/shop" ? "active-link" : "")
+                    }
+                  ></div>
+                </li>
+              </ul>
+              <div className="nav-buttons">
+                {Cookies.get("token") || Cookies.get("club") ? (
+                  <img
+                    onClick={handleNavigate}
+                    src={ProfilePicture}
+                    alt="lol"
+                    className="nav_user_img"
+                  />
+                ) : (
+                  <>
+                    <div className="nav-item home">
+                      <Button
+                        size="sm"
+                        variant="outlined"
+                        className=" nav_signin_btn"
+                        onClick={toggleSignInModal}
+                      >
+                        Sign in
+                      </Button>
+                    </div>
+                    <div className="nav-item home">
+                      <Button
+                        size="sm"
+                        className=" nav_signup_btn"
+                        onClick={toggleSignUpModal}
+                      >
+                        Sign up
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      </ClickAwayListener>
       {isSignUpModalOpen && (
         <Modal onClose={toggleSignUpModal}>
           <div className="signUpModalHeader">

diff --git a/src/context/MilanState.jsx b/src/context/MilanState.jsx
@@ -57,6 +57,7 @@ const MilanState = (props) => {
         isSignInModalOpen,
         toggleSignInModal,
         isNavbarOpen,
+        setIsNavbarOpen,
         toggleNavbar,
       }}
     >

diff --git a/src/utils/clickAwayListener.jsx b/src/utils/clickAwayListener.jsx
@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+
+export default function ClickAwayListener(props) {
+  const { children, onClickAway } = props;
+
+  useEffect(() => {
+    function handleClick(event) {
+      // Check if the clicked element is inside the component
+      if (!event.target.closest(".click-away-listener")) {
+        // If it's not, call the onClickAway function
+        onClickAway();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [onClickAway]);
+
+  return <div className="click-away-listener">{children}</div>;
+}