add side bar to group chat

[swuecho]

https://www.naiveui.com/zh-CN/os-theme/components/menu#select.vue

方便管理很会话.

[swuecho]

I understand that you want to create a menu with two levels (menu and submenu) using Vue 3's composition API and the Naive UI library. Here's a simple example of how you can achieve this:

1. First, make sure to install Naive UI in your Vue project if you haven't already:

npm install @naive-ui/vue

2. Import and register the necessary components in your main.js file:

import { createApp } from 'vue';
import { create, NConfigProvider } from '@naive-ui/vue';
import App from './App.vue';

const app = createApp(App);
const naive = create({});

app.use(naive);
app.use(NConfigProvider);
app.mount('#app');

3. Create a new Vue component for the two-level menu, let's call it TwoLevelMenu.vue:

<template>
  <n-space vertical>
    <n-menu :options="menuOptions" @select="handleSelect" />
  </n-space>
</template>

<script>
import { ref } from 'vue';
import { NMenu } from '@naive-ui/vue';

export default {
  components: {
    NMenu,
  },
  setup() {
    const menuOptions = ref([
      {
        label: 'Menu 1',
        key: 'menu1',
        children: [
          { label: 'Submenu 1.1', key: 'submenu1-1' },
          { label: 'Submenu 1.2', key: 'submenu1-2' },
        ],
      },
      {
        label: 'Menu 2',
        key: 'menu2',
        children: [
          { label: 'Submenu 2.1', key: 'submenu2-1' },
          { label: 'Submenu 2.2', key: 'submenu2-2' },
        ],
      },
    ]);

    const handleSelect = (key) => {
      console.log('Selected:', key);
    };

    return {
      menuOptions,
      handleSelect,
    };
  },
};
</script>

4. Use the TwoLevelMenu component in your App.vue:

<template>
  <n-config-provider>
    <two-level-menu />
  </n-config-provider>
</template>

<script>
import TwoLevelMenu from './components/TwoLevelMenu.vue';

export default {
  components: {
    TwoLevelMenu,
  },
};
</script>

This example will create a two-level menu with two main menu items and two submenu items for each main menu item. When a submenu item is selected, the handleSelect function will log the selected key in the console.