feat: basic support in mobile mode. including:

navbar show and hide,
similar fade animation,
auto close when select new convo,
mobile title will change with convo,
new chat button.

client/index.js

@@ -5,6 +5,7 @@ import { store } from './src/store';
 import { ThemeProvider } from './src/hooks/ThemeContext';
 import App from './src/App';
 import './src/style.css';
+import './src/mobile.css'
 
 const container = document.getElementById('root');
 const root = createRoot(container);

client/src/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Messages from './components/Messages';
 import Landing from './components/Main/Landing';
 import TextChat from './components/Main/TextChat';
@@ -10,14 +10,16 @@ import { useSelector } from 'react-redux';
 const App = () => {
   const { messages } = useSelector((state) => state.messages);
   const { title } = useSelector((state) => state.convo);
+  const { conversationId } = useSelector((state) => state.convo);
+  const [ navVisible, setNavVisible ]= useState(false)
   useDocumentTitle(title);
 
   return (
     <div className="flex h-screen">
-      <Nav />
+      <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
       <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
         <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800">
-          <MobileNav />
+          <MobileNav setNavVisible={setNavVisible} />
           {messages.length === 0 ? (
             <Landing title={title} />
           ) : (

client/src/components/Nav/MobileNav.jsx

@@ -1,11 +1,33 @@
 import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { setNewConvo } from '~/store/convoSlice';
+import { setMessages } from '~/store/messageSlice';
+import { setText } from '~/store/textSlice';
+
+export default function MobileNav({ setNavVisible }) {
+  const dispatch = useDispatch();
+  const { conversationId, convos } = useSelector((state) => state.convo);
+
+  const toggleNavVisible = () => {
+    setNavVisible((prev) => {
+      return !prev
+    })
+  }
+
+  const newConvo = () => {
+    dispatch(setText(''));
+    dispatch(setMessages([]));
+    dispatch(setNewConvo());
+  }
+
+  const title = convos?.find(element => element?.conversationId == conversationId)?.title || 'New Chat';
 
-export default function MobileNav({ title = 'New Chat' }) {
   return (
     <div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
       <button
         type="button"
         className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
+        onClick={toggleNavVisible}
       >
         <span className="sr-only">Open sidebar</span>
         <svg
@@ -44,6 +66,7 @@ export default function MobileNav({ title = 'New Chat' }) {
       <button
         type="button"
         className="px-3"
+        onClick={newConvo}
       >
         <svg
           stroke="currentColor"

client/src/components/Nav/index.jsx

@@ -8,7 +8,7 @@ import { swr } from '~/utils/fetchers';
 import { useDispatch, useSelector } from 'react-redux';
 import { incrementPage, setConvos } from '~/store/convoSlice';
 
-export default function Nav() {
+export default function Nav({ navVisible, setNavVisible }) {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
   const { conversationId, convos, pageNumber } = useSelector((state) => state.convo);
@@ -47,19 +47,30 @@ export default function Nav() {
     }
   }, [data]);
 
+  useEffect(() => {
+    setNavVisible(false)
+  }, [conversationId, ])
+
+  const toggleNavVisible = () => {
+    setNavVisible((prev) => {
+      return !prev
+    })
+  }
+
   const containerClasses =
     isLoading && pageNumber === 1
       ? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
       : 'flex flex-col gap-2 text-gray-100 text-sm';
 
   return (
-    <div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
+    <>
+      <div className={"dark nav bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col" + (navVisible?' active':'')}>
         <div className="flex h-full min-h-0 flex-col ">
           <div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
             <nav className="flex h-full flex-1 flex-col space-y-1 p-2">
               <NewChat />
               <div
-              className={`-mr-2 flex-1 flex-col overflow-y-auto ${
+                className={`flex-1 flex-col overflow-y-auto ${
                   isHovering ? '' : 'scrollbar-transparent'
                 } border-b border-white/20`}
                 onMouseEnter={() => setIsHovering(true)}
@@ -83,6 +94,41 @@ export default function Nav() {
             </nav>
           </div>
         </div>
+        <button
+          type="button"
+          className="nav-close-button -ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-white hover:text-white text-white"
+          onClick={toggleNavVisible}
+        >
+          <span className="sr-only">Open sidebar</span>
+          <svg
+            stroke="currentColor"
+            fill="none"
+            strokeWidth="1.5"
+            viewBox="0 0 24 24"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="h-6 w-6"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="3"
+              y1="6"
+              x2="15"
+              y2="18"
+            />
+            <line
+              x1="3"
+              y1="18"
+              x2="15"
+              y2="6"
+            />
+          </svg>
+        </button>
       </div>
+      <div className={"nav-mask" + (navVisible?' active':'')} onClick={toggleNavVisible}>
+      </div>
+    </>
   );
 }

client/src/mobile.css

@@ -0,0 +1,55 @@
+.nav-mask {
+    position: fixed;
+    z-index: 998;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(86, 88, 105, .75);
+    padding-left: 420px;
+    padding-top: 12px;
+    opacity: 0;
+    transition: all .5s;
+    pointer-events: none;
+}
+
+.nav {
+    transition: all .5s;
+}
+
+.nav-close-button {
+    display: none;
+}
+
+@media (max-width: 767px) {
+    .nav-close-button {
+        display: block;
+        position: absolute;
+        left: 100%;
+        top: 12px;
+        margin-left: 20px;
+    }
+
+    .nav {
+        position: fixed;
+        z-index: 999;
+        left: calc(-100%);;
+        top: 0;
+        bottom: 0;
+        max-width: 400px;
+        width: calc(100% - 60px);
+        opacity: 0;
+    }
+    
+    .nav.active {
+        left: 0;
+        opacity: 1;
+    }
+
+    .nav-mask.active {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+  
+