fixes 8 of nick's list

frontend/src/App.tsx

@@ -8,15 +8,12 @@ import { ActiveState } from './models/misc';
 export default function App() {
   //TODO : below media query is disjoint from tailwind. Please wire it together.
   const [navState, setNavState] = useState<ActiveState>(
-    window.matchMedia('((min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
+    window.matchMedia('(min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
   );
 
   return (
     <div className="min-h-full min-w-full">
-      <Navigation
-        navState={navState}
-        setNavState={(val: ActiveState) => setNavState(val)}
-      />
+      <Navigation navState={navState} setNavState={setNavState} />
       <div
         className={`transition-all duration-200 ${
           navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-60' : 'ml-0 md:ml-16'

frontend/src/Navigation.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
 import Arrow2 from './assets/dropdown-arrow.svg';
@@ -18,13 +18,14 @@ import {
   selectSourceDocs,
   setSelectedDocs,
 } from './preferences/preferenceSlice';
+import { useOutsideAlerter } from './hooks';
 
 export default function Navigation({
   navState,
   setNavState,
 }: {
   navState: ActiveState;
-  setNavState: (val: ActiveState) => void;
+  setNavState: React.Dispatch<React.SetStateAction<ActiveState>>;
 }) {
   const dispatch = useDispatch();
   const docs = useSelector(selectSourceDocs);
@@ -41,9 +42,27 @@ export default function Navigation({
   const [selectedDocsModalState, setSelectedDocsModalState] =
     useState<ActiveState>(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE');
 
+  const navDiv = useRef(null);
+  useOutsideAlerter(
+    navDiv,
+    () => {
+      if (
+        window.matchMedia('(max-width: 768px)').matches &&
+        navState === 'ACTIVE' &&
+        apiKeyModalState === 'INACTIVE' &&
+        selectedDocsModalState === 'INACTIVE' &&
+        !isDocsListOpen
+      ) {
+        setNavState('INACTIVE');
+      }
+    },
+    [navState, isDocsListOpen, apiKeyModalState, selectedDocsModalState],
+  );
+
   return (
     <>
       <div
+        ref={navDiv}
         className={`${
           navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem]'
         } duration-20 fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}

frontend/src/hooks.ts

@@ -0,0 +1,19 @@
+import { useEffect, RefObject } from 'react';
+
+export function useOutsideAlerter<T extends HTMLElement>(
+  ref: RefObject<T>,
+  handler: () => void,
+  deps: any[],
+) {
+  useEffect(() => {
+    function handleClickOutside(this: Document, event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, ...deps]);
+}