update playground example

zunder-ai · Aug 29, 2024 · c1b96b8 · c1b96b8
1 parent 4642aa6
commit c1b96b8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/.playground/composables/useChatSidebar.ts b/.playground/composables/useChatSidebar.ts
@@ -0,0 +1,10 @@
+export const useChatSidebar = () => {
+    const isOpen = ref(false);
+    const toggle = () => {
+        isOpen.value = !isOpen.value;
+    };
+    return {
+        isOpen,
+        toggle,
+    };
+};
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <ZChatSidebar>
+    <ZChatSidebar v-model:open="isOpen" side="right">
         <template #content>
             <div class="flex items-center">
                 <div class="flex flex-1 items-center leading-none">
@@ -9,28 +9,33 @@
                         >AI CHAT</span>
                     </h1>
                 </div>
-                <div>
-                    <UButton variant="ghost" color="black" icon="i-heroicons-arrow-right-start-on-rectangle" />
+                <div class="md:hidden">
+                    <UButton variant="ghost" color="black" icon="i-heroicons-x-mark" @click="isOpen = false" />
                 </div>
             </div>
             <div class="w-full">
                 <UButton variant="soft" label="Start a new chat" block icon="i-heroicons-plus" trailing />
             </div>
             <div class="flex flex-1" />
             <div class="flex items-center">
-                <div class="flex flex-1 items-center leading-none">
+                <div>
+                    <UButton variant="ghost" color="black" icon="i-heroicons-cog-6-tooth" />
+                </div>
+                <div class="flex flex-1 items-center justify-end leading-none">
                     <UAvatar
                         src="/avatar.png"
                         alt="Avatar"
                     />
                 </div>
-                <div>
-                    <UButton variant="ghost" color="black" icon="i-heroicons-cog-6-tooth" />
-                </div>
             </div>
         </template>
     </ZChatSidebar>
     <ZChatPage>
+        <template #header-right>
+            <div class="md:hidden">
+                <UButton variant="ghost" color="black" icon="i-heroicons-bars-3" @click="toggle" />
+            </div>
+        </template>
         <template #messages>
             <ZChatMessages :messages="chatMessages" />
         </template>
@@ -42,6 +47,9 @@
 
 <script setup lang="ts">
 import type { ChatMessage } from '../../types/chat'
+
+const { isOpen, toggle } = useChatSidebar();
+
 const loading = ref(false);
 const chatMessages = ref<ChatMessage[]>([]);
 

diff --git a/components/layout/ChatPage.vue b/components/layout/ChatPage.vue
@@ -12,6 +12,7 @@
           <div :class="ui.header.buttons">
             <UButton color="gray" variant="ghost" icon="i-heroicons-cog-6-tooth" />
             <ZColorModeButton />
+            <slot name="header-right" />
           </div>
         </div>
       </UContainer>