From 070fee2ece682f6f7649380bb68dece376b4c041 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Sun, 12 Mar 2023 00:32:03 +0800
Subject: [PATCH] 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                         |   1 +
 client/src/App.jsx                      |   8 +-
 client/src/components/Nav/MobileNav.jsx |  25 +++++-
 client/src/components/Nav/index.jsx     | 104 +++++++++++++++++-------
 client/src/mobile.css                   |  55 +++++++++++++
 5 files changed, 160 insertions(+), 33 deletions(-)
 create mode 100644 client/src/mobile.css

diff --git a/client/index.js b/client/index.js
index 6b09d493e2..6e1b2c1620 100644
--- a/client/index.js
+++ b/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);
diff --git a/client/src/App.jsx b/client/src/App.jsx
index f0d9dd62c6..9bab1f5939 100644
--- a/client/src/App.jsx
+++ b/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} />
           ) : (
diff --git a/client/src/components/Nav/MobileNav.jsx b/client/src/components/Nav/MobileNav.jsx
index 79f3c416bc..502850a80e 100644
--- a/client/src/components/Nav/MobileNav.jsx
+++ b/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"
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index 2ae96d22cc..ede98576e5 100644
--- a/client/src/components/Nav/index.jsx
+++ b/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,42 +47,88 @@ 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="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 ${
-                isHovering ? '' : 'scrollbar-transparent'
-              } border-b border-white/20`}
-              onMouseEnter={() => setIsHovering(true)}
-              onMouseLeave={() => setIsHovering(false)}
-              ref={containerRef}
-            >
-              <div className={containerClasses}>
-                {isLoading && pageNumber === 1 ? (
-                  <Spinner />
-                ) : (
-                  <Conversations
-                    conversations={convos}
-                    conversationId={conversationId}
-                    showMore={showMore}
-                    pageNumber={pageNumber}
-                  />
-                )}
+    <>
+      <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={`flex-1 flex-col overflow-y-auto ${
+                  isHovering ? '' : 'scrollbar-transparent'
+                } border-b border-white/20`}
+                onMouseEnter={() => setIsHovering(true)}
+                onMouseLeave={() => setIsHovering(false)}
+                ref={containerRef}
+              >
+                <div className={containerClasses}>
+                  {isLoading && pageNumber === 1 ? (
+                    <Spinner />
+                  ) : (
+                    <Conversations
+                      conversations={convos}
+                      conversationId={conversationId}
+                      showMore={showMore}
+                      pageNumber={pageNumber}
+                    />
+                  )}
+                </div>
               </div>
-            </div>
-            <NavLinks />
-          </nav>
+              <NavLinks />
+            </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>
+      <div className={"nav-mask" + (navVisible?' active':'')} onClick={toggleNavVisible}>
+      </div>
+    </>
   );
 }
diff --git a/client/src/mobile.css b/client/src/mobile.css
new file mode 100644
index 0000000000..e633ecaea3
--- /dev/null
+++ b/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;
+    }
+}
+  
+  
\ No newline at end of file