point 8 from Nick's list

frontend/src/Navigation.tsx

@@ -42,27 +42,26 @@ export default function Navigation({
   const [selectedDocsModalState, setSelectedDocsModalState] =
     useState<ActiveState>(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE');
 
-  const navDiv = useRef(null);
+  const navRef = useRef(null);
   useOutsideAlerter(
-    navDiv,
+    navRef,
     () => {
       if (
         window.matchMedia('(max-width: 768px)').matches &&
         navState === 'ACTIVE' &&
-        apiKeyModalState === 'INACTIVE' &&
-        selectedDocsModalState === 'INACTIVE' &&
-        !isDocsListOpen
+        apiKeyModalState === 'INACTIVE'
       ) {
         setNavState('INACTIVE');
+        setIsDocsListOpen(false);
       }
     },
-    [navState, isDocsListOpen, apiKeyModalState, selectedDocsModalState],
+    [isDocsListOpen, apiKeyModalState],
   );
 
   return (
     <>
       <div
-        ref={navDiv}
+        ref={navRef}
         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

@@ -3,7 +3,7 @@ import { useEffect, RefObject } from 'react';
 export function useOutsideAlerter<T extends HTMLElement>(
   ref: RefObject<T>,
   handler: () => void,
-  deps: any[],
+  additionalDeps: unknown[],
 ) {
   useEffect(() => {
     function handleClickOutside(this: Document, event: MouseEvent) {
@@ -15,5 +15,5 @@ export function useOutsideAlerter<T extends HTMLElement>(
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [ref, ...deps]);
+  }, [ref, ...additionalDeps]);
 }

frontend/src/preferences/APIKeyModal.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
+import { useOutsideAlerter } from './../hooks';
 
 export default function APIKeyModal({
   modalState,
@@ -16,6 +17,20 @@ export default function APIKeyModal({
   const apiKey = useSelector(selectApiKey);
   const [key, setKey] = useState(apiKey);
   const [isError, setIsError] = useState(false);
+  const modalRef = useRef(null);
+
+  useOutsideAlerter(
+    modalRef,
+    () => {
+      if (
+        window.matchMedia('(max-width: 768px)').matches &&
+        modalState === 'ACTIVE'
+      ) {
+        setModalState('INACTIVE');
+      }
+    },
+    [modalState],
+  );
 
   function handleSubmit() {
     if (key.length <= 1) {
@@ -39,7 +54,10 @@ export default function APIKeyModal({
         modalState === 'ACTIVE' ? 'visible' : 'hidden'
       } absolute z-30  h-screen w-screen  bg-gray-alpha`}
     >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+      <article
+        ref={modalRef}
+        className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"
+      >
         <p className="text-xl text-jet">OpenAI API Key</p>
         <p className="text-md leading-6 text-gray-500">
           Before you can start using DocsGPT we need you to provide an API key