mobile friendly chat

LlmLaraHub · Jun 9, 2024 · c5e2404 · c5e2404
1 parent c94b44e
commit c5e2404
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/resources/js/Pages/Chat/ChatUi.vue b/resources/js/Pages/Chat/ChatUi.vue
@@ -16,7 +16,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <div class="flex-1 flex flex-col shadow-sm mx-10  overflow-hidden ">
+    <div class="flex-1 flex flex-col shadow-sm mx-2 sm:mx-5  overflow-hidden ">
             <div class="mb-2">
                 <ChatMessage
                 :chat="chat.data" :messages="messages.data">

diff --git a/resources/js/Pages/Collection/Chat.vue b/resources/js/Pages/Collection/Chat.vue
@@ -80,12 +80,12 @@ onUnmounted(() => {
         <div class="py-12">
             <div class="max-w-9xl mx-auto sm:px-6 lg:px-8">
                 <div class="grid grid-cols-12 gap-2">
-                    <div class="col-span-2">
+                    <div class="hidden sm:col-span-2 sm:flex">
                         <ChatSideNav
                             :collection="collection.data"
                             :chats="chats"></ChatSideNav>
                     </div>
-                    <div class="col-span-10">
+                    <div class="col-span-12 sm:col-span-10">
                         <div class="overflow-hidden shadow-xl sm:rounded-lg">
                             <div class="px-3">
                                 <div class="flex justify-between items-center">
@@ -101,6 +101,12 @@ onUnmounted(() => {
                             <ChatUi :chat="chat" :messages="messages"></ChatUi>
                         </div>
                     </div>
+
+                    <div class="col-span-12 sm:hidden px-4 mt-4">
+                        <ChatSideNav
+                            :collection="collection.data"
+                            :chats="chats"></ChatSideNav>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/resources/js/Pages/Collection/Components/ChatSideNav.vue b/resources/js/Pages/Collection/Components/ChatSideNav.vue
@@ -16,7 +16,10 @@ const props = defineProps({
                  :collection="collection" >
                 <template #default>
                     <div class="flex items-center gap-2">
-                        <img src="/images/logo.png" class="h-8 w-8" />
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+                        </svg>
+
                         <span class="text-white">New Chat</span>
                     </div>
                 </template>