46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue'
|
|
import { useSocketsStore } from '@/stores/sockets.ts'
|
|
import AppMenu from '@/components/AppMenu.vue'
|
|
import LeftPane from '@/components/LeftPane.vue'
|
|
import RightPane from '@/components/RightPane.vue'
|
|
import UsersList from '@/components/Users/UsersList.vue'
|
|
import SettingsList from '@/components/Settings/SettingsList.vue'
|
|
import ChatsList from '@/components/Chats/ChatsList.vue'
|
|
import { useMenuStore } from '@/stores/menu.ts'
|
|
|
|
const socketsStore = useSocketsStore()
|
|
const menuStore = useMenuStore()
|
|
|
|
const component = computed(() => {
|
|
switch (menuStore.selected) {
|
|
case 'chats':
|
|
return ChatsList
|
|
case 'users':
|
|
return UsersList
|
|
case 'settings':
|
|
return SettingsList
|
|
default:
|
|
return ChatsList
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
socketsStore.init()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full">
|
|
<div class="flex w-full">
|
|
<AppMenu />
|
|
<LeftPane>
|
|
<component :is="component" />
|
|
</LeftPane>
|
|
</div>
|
|
<RightPane />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|