wip

src/views/MainView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useSocketsStore } from '@/stores/sockets.ts'
 import AppMenu from '@/components/AppMenu.vue'
 import LeftPane from '@/components/LeftPane.vue'
@@ -7,15 +7,13 @@ 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()
-
-type MenuSelected = 'chats' | 'users' | 'settings'
-
-const selected = ref<MenuSelected>()
+const menuStore = useMenuStore()
 
 const component = computed(() => {
-  switch (selected.value) {
+  switch (menuStore.selected) {
     case 'chats':
       return ChatsList
     case 'users':
@@ -35,7 +33,7 @@ onMounted(() => {
 <template>
   <div class="flex h-full">
     <div class="flex w-full">
-      <AppMenu v-model="selected" />
+      <AppMenu />
       <LeftPane>
         <component :is="component" />
       </LeftPane>