From d14438bf545607268eb00236a40eae0a8bf2b83a Mon Sep 17 00:00:00 2001
From: TaylorS15 <taylorsvec978@yahoo.com>
Date: Fri, 3 Mar 2023 16:15:35 -0500
Subject: [PATCH] navigation changes/bugfix fixed chats being visible under
 text below chat box

---
 frontend/src/Navigation.tsx                | 21 +++++++++++++++++----
 frontend/src/conversation/Conversation.tsx |  6 +++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 4709f4ae..a2cedb03 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
 import Arrow2 from './assets/dropdown-arrow.svg';
@@ -58,6 +58,19 @@ export default function Navigation({
     [navState, isDocsListOpen, apiKeyModalState],
   );
 
+  /*
+    Needed to fix bug where if mobile nav was closed and then window was resized to desktop, nav would still be closed but the button to open would be gone, as per #1 on issue #146
+  */
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      if (window.matchMedia('(min-width: 768px)').matches) {
+        setNavState('ACTIVE');
+      } else {
+        setNavState('INACTIVE');
+      }
+    });
+  }, []);
+
   return (
     <>
       <div
@@ -66,7 +79,7 @@ export default function Navigation({
           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`}
       >
-        <div className={'h-16 w-full border-b-2'}>
+        <div className={'visible h-16 w-full border-b-2 md:hidden'}>
           <button
             className="float-right mr-5 mt-5 h-5 w-5"
             onClick={() =>
@@ -95,7 +108,7 @@ export default function Navigation({
         </NavLink>
 
         <div className="flex-grow border-b-2 border-gray-100"></div>
-        <div className="flex flex-grow flex-col-reverse border-b-2">
+        <div className="flex flex-col-reverse border-b-2">
           <div className="relative my-4 px-6">
             <div
               className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white"
@@ -143,7 +156,7 @@ export default function Navigation({
               </div>
             )}
           </div>
-          <p className="ml-6 font-bold text-jet">Source Docs</p>
+          <p className="ml-6 mt-3 font-bold text-jet">Source Docs</p>
         </div>
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <div
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index f9763665..a33a4fe1 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -32,7 +32,7 @@ export default function Conversation() {
   return (
     <div className="flex justify-center p-6">
       {messages.length > 0 && (
-        <div className="mt-20 flex w-10/12 flex-col transition-all md:w-1/2">
+        <div className="mt-20 flex w-10/12 flex-col transition-all md:w-3/4">
           {messages.map((message, index) => {
             return (
               <ConversationBubble
@@ -49,7 +49,7 @@ export default function Conversation() {
         </div>
       )}
       {messages.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
-      <div className="fixed bottom-6 flex w-10/12 flex-col items-end self-center md:w-[50%]">
+      <div className="fixed bottom-0 flex w-10/12 flex-col items-end self-center md:w-[50%]">
         <div className="flex w-full">
           <div
             ref={inputRef}
@@ -85,7 +85,7 @@ export default function Conversation() {
             </div>
           )}
         </div>
-        <p className="mt-3 w-10/12 self-center text-center text-xs text-gray-2000">
+        <p className="w-[100vw] self-center bg-white p-5 text-center text-xs text-gray-2000">
           This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
           questions.
         </p>