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

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