From 5d11cfa3438a65cf4e59686574dc4edfb906ab76 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sun, 5 Mar 2023 01:33:46 +0800
Subject: [PATCH] style: improvements

---
 .../Chat/ChatContent/ChatContent.tsx          |  2 +-
 .../Chat/ChatContent/ScrollToBottomButton.tsx |  8 ++-
 src/components/Menu/Menu.tsx                  | 53 +++++++++++--------
 src/components/MobileBar/MobileBar.tsx        |  1 +
 4 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/components/Chat/ChatContent/ChatContent.tsx b/src/components/Chat/ChatContent/ChatContent.tsx
index aea9de5..e7e96ca 100644
--- a/src/components/Chat/ChatContent/ChatContent.tsx
+++ b/src/components/Chat/ChatContent/ChatContent.tsx
@@ -66,7 +66,7 @@ const ChatContent = () => {
               Submit
             </button>
           </div>
-          <div className='w-full h-32 md:h-48 flex-shrink-0'></div>
+          <div className='w-full h-10'></div>
         </div>
       </ScrollToBottom>
     </div>
diff --git a/src/components/Chat/ChatContent/ScrollToBottomButton.tsx b/src/components/Chat/ChatContent/ScrollToBottomButton.tsx
index 0318c03..976c005 100644
--- a/src/components/Chat/ChatContent/ScrollToBottomButton.tsx
+++ b/src/components/Chat/ChatContent/ScrollToBottomButton.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
-import { useScrollToBottom } from 'react-scroll-to-bottom';
+import { useAtBottom, useScrollToBottom } from 'react-scroll-to-bottom';
 
 import DownArrow from '@icon/DownArrow';
 
 const ScrollToBottomButton = () => {
   const scrollToBottom = useScrollToBottom();
+  const [atBottom] = useAtBottom();
+
   return (
     <button
-      className='cursor-pointer absolute right-6 bottom-[60px] md:bottom-[60px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200'
+      className={`cursor-pointer absolute right-6 bottom-[60px] md:bottom-[60px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 ${
+        atBottom ? 'hidden' : ''
+      }`}
       onClick={scrollToBottom}
     >
       <DownArrow />
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 301cdd8..9ca8a37 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -7,32 +7,39 @@ import CrossIcon2 from '@icon/CrossIcon2';
 
 const Menu = () => {
   return (
-    <div
-      id='menu'
-      className='dark bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col max-md:translate-x-[-100%] max-md:fixed max-md:transition-transform max-md:z-[999] max-md:top-0 max-md:left-0 max-md:h-full'
-    >
-      <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 />
-            <ChatHistoryList />
-            <MenuOptions />
-          </nav>
+    <>
+      <div
+        id='menu'
+        className='dark bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col max-md:translate-x-[-100%] max-md:fixed max-md:transition-transform max-md:z-[999] max-md:top-0 max-md:left-0 max-md:h-full max-md:w-3/4'
+      >
+        <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 />
+              <ChatHistoryList />
+              <MenuOptions />
+            </nav>
+          </div>
+        </div>
+        <div
+          id='menu-close'
+          className='hidden md:hidden absolute z-[999] right-0 translate-x-full top-10 bg-gray-900 p-2 cursor-pointer hover:bg-black text-white'
+          onClick={() => {
+            document
+              .getElementById('menu')
+              ?.classList.remove('max-md:translate-x-[0%]');
+            document.getElementById('menu-close')?.classList.add('hidden');
+            document.getElementById('menu-backdrop')?.classList.add('hidden');
+          }}
+        >
+          <CrossIcon2 />
         </div>
       </div>
       <div
-        id='menu-close'
-        className='hidden md:hidden absolute z-[999] right-0 translate-x-full top-10 bg-gray-900 p-2 cursor-pointer hover:bg-black text-white'
-        onClick={() => {
-          document
-            .getElementById('menu')
-            ?.classList.remove('max-md:translate-x-[0%]');
-          document.getElementById('menu-close')?.classList.add('hidden');
-        }}
-      >
-        <CrossIcon2 />
-      </div>
-    </div>
+        id='menu-backdrop'
+        className='hidden md:hidden fixed top-0 left-0 h-full w-full z-[60] bg-gray-900/70'
+      />
+    </>
   );
 };
 
diff --git a/src/components/MobileBar/MobileBar.tsx b/src/components/MobileBar/MobileBar.tsx
index d524ee1..1ef7790 100644
--- a/src/components/MobileBar/MobileBar.tsx
+++ b/src/components/MobileBar/MobileBar.tsx
@@ -20,6 +20,7 @@ const MobileBar = () => {
             .getElementById('menu')
             ?.classList.add('max-md:translate-x-[0%]');
           document.getElementById('menu-close')?.classList.remove('hidden');
+          document.getElementById('menu-backdrop')?.classList.remove('hidden');
         }}
       >
         <span className='sr-only'>Open sidebar</span>