Merge pull request #170 from mongoosejs/vkarpov15/chat-sidebar-mobile

allow opening chat history sidebar on mobile

Author: vkarpov15

frontend/src/chat/chat.html

@@ -1,10 +1,13 @@
 <div class="flex" style="height: calc(100vh - 55px); height: calc(100dvh - 55px)">
-  <div
-    class="fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10"
+  <button
+    type="button"
+    class="fixed top-[65px] left-0 cursor-pointer bg-gray-100 rounded-r-md z-10 p-1 lg:hidden"
     @click="hideSidebar = false"
-    v-show="hideSidebar">
-    <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" fill="#5f6368"><path d="M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z"/></svg>
-  </div>
+    v-show="hideSidebar !== false"
+    aria-label="Open chat history"
+    title="Open chat history">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-5 h-5" fill="#5f6368"><path d="M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z"/></svg>
+  </button>
   <button
     class="fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white"
     :class="hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'"
@@ -17,12 +20,15 @@
     <svg v-else xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z"/></svg>
   </button>
   <!-- Sidebar: Chat Threads -->
-  <aside class="border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative" :class="hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''">
+  <aside
+    class="bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-transform duration-300 ease-in-out z-20 w-64 fixed lg:relative"
+    :class="hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:hidden' : '-translate-x-full lg:translate-x-0'"
+    style="z-index: 10000">
     <div class="flex items-center border-b border-gray-100 w-64 overflow-x-hidden">
       <div class="p-1 ml-2 font-bold">Chat Threads</div>
       <button
         @click="hideSidebar = true"
-        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none"
+        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none lg:hidden"
         aria-label="Close sidebar"
       >
         <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" fill="currentColor"><path d="M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>