Close on click outside

components/OrganizedContent.tsx

@@ -2,7 +2,7 @@ import React, {
   ReactNode,
   ComponentType,
   useState,
-  //useRef,
+  useRef,
   useEffect,
 } from "react";
 import styles from "./OrganizedContent.module.css";
@@ -105,7 +105,7 @@ export const OrganizedContent = ({
       </div>
       <div>
         <Burger {...mobileProps} />
-        <Menu {...menuProps} />
+        <MenuWrapper {...menuProps} />
       </div>
     </div>
   );
@@ -218,6 +218,17 @@ const Burger = ({ open, setOpen }: MobileProps) => {
   );
 };
 
+function MenuWrapper(menuProps: MenuProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  useOutsideAlerter(wrapperRef, menuProps.setOpen);
+
+  return (
+    <div ref={wrapperRef}>
+      <Menu {...menuProps} />
+    </div>
+  );
+}
+
 const Menu = ({ open, childProps }: MenuProps) => {
   const mobileNav = open
     ? styles.mobileNav
@@ -228,3 +239,26 @@ const Menu = ({ open, childProps }: MenuProps) => {
     </div>
   );
 };
+
+function useOutsideAlerter(
+  ref: React.RefObject<HTMLDivElement>,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+) {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    const handleClickOutside = (event: Event) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, setOpen]);
+}