<template>
  <el-menu
    style="background-color: #2b333e"
    router
    :default-openeds="menu.openMenu"
    @open="v => menu.setOpenMenu(v)"
    @close="v => menu.setOpenMenu(v)"
    :collapse="collapse"
    :unique-opened="true"
  >
    <div style="width: 200px; height: 70px"></div>
    <Menu :menu="menu.menu"></Menu>
  </el-menu>
</template>

<script setup>
import {
  ref,
  onMounted,
  onBeforeMount,
  reactive,
  computed,
  watch,
  toRefs,
  unref,
  nextTick
} from 'vue';
import { useRouter } from 'vue-router';
import useMenuStore from '~/store/menu';
import Menu from './Menu.vue';

const props = defineProps({
  collapse: Boolean
});
const menu = useMenuStore();
</script>
<style lang="less" scoped>
.el-menu {
  height: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
