pt1

src/app/components/Navbar.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import styles from "./Navbar.module.css";
@@ -8,6 +8,7 @@ import logo from "../assets/logo.svg";
 import menu from "../assets/menu.svg";
 import close from "../assets/close.svg";
 import { usePathname } from "next/navigation";
+// import { motion } from "motion/react"
 
 export default function Navbar() {
   const pathname = usePathname();
@@ -22,9 +23,31 @@ export default function Navbar() {
     setDropdownActive(!isDropdownActive);
   }
 
+  function useOutsideAlerter(ref) {
+    useEffect(() => {
+      /**
+       * Alert if clicked on outside of element
+       */
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setActive(true);
+        }
+      }
+      // Bind the event listener
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [ref]);
+  }
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+
   return (
     <nav className={`${styles.navbar} shadow`}>
-      <div className={`${styles.container} container`}>
+      <div className={`${styles.container} container`} ref={wrapperRef}>
         <div className={styles.header}>
           <div>
             <Link href="/" className={styles.logo}>
@@ -57,7 +80,7 @@ export default function Navbar() {
           <li
             className={`
               ${styles.dropdown} 
-              ${isDropdownActive ? styles.dropdownActive : ""}
+              ${isDropdownActive && !isActive ? styles.dropdownActive : ""}
             `}
           >
             <a