fix(SW-272): now closing on click outside and also closing the mobile menu when changing to screensizes larger than mobile

hooks/useClickOutside.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react"
+
+export default function useClickOutside(
+  ref: React.RefObject<HTMLElement>,
+  isOpen: boolean,
+  callback: () => void
+) {
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (ref.current && target && !ref.current.contains(target) && isOpen) {
+        callback()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside)
+    }
+  }, [ref, isOpen, callback])
+}

hooks/useMediaQuery.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react"
+
+function useMediaQuery(query: string) {
+  const [isMatch, setIsMatch] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== isMatch) {
+      setIsMatch(media.matches)
+    }
+
+    const listener = () => setIsMatch(media.matches)
+    media.addEventListener("change", listener)
+
+    return () => media.removeEventListener("change", listener)
+  }, [isMatch, query])
+
+  return isMatch
+}
+
+export default useMediaQuery