wip

src/components/Chats/ChatsList.vue

@@ -28,11 +28,20 @@ function getMessages([selected]: string[]) {
         <template v-slot:activator="{ props }">
           <VBtn size="small" icon="mdi-menu" class="mr-2" color="white" v-bind="props" />
         </template>
-        <VList class="top-1" density="compact" slim v-model:selected="menuStore.selected">
-          <VListItem value="users" title="Contacts" prepend-gap="8" prepend-icon="mdi-account" />
-          <VListItem value="settings" title="Settings" prepend-gap="8" prepend-icon="mdi-cog" />
+        <VList
+          class="top-1"
+          width="200"
+          density="compact"
+          slim
+          v-model:selected="menuStore.selected"
+        >
+          <VListItem class="pa-0">
+            <div class="bg-amber-600 flex justify-center">HELLO WORLD</div>
+          </VListItem>
+          <VListItem value="users" title="Contacts" prepend-icon="mdi-account" />
+          <VListItem value="settings" title="Settings" prepend-icon="mdi-cog" />
           <VDivider class="my-1" />
-          <VListItem value="logout" title="Log Out" />
+          <VListItem value="logout" title="Log Out" prepend-icon="mdi-logout" />
         </VList>
       </VMenu>
 

src/components/Messages/MessagesList.vue

@@ -6,7 +6,7 @@ const { messages } = defineProps<{ messages: Message[] }>()
 </script>
 
 <template>
-  <MessageData>Hello world</MessageData>
+  <MessageData v-for="message in messages" :key="message.id" />
 </template>
 
 <style scoped></style>