<template>
  <el-scrollbar>
    <el-menu
      class="secondMenu"
      :default-active="activeMenu"
      background-color="transparent"
      :text-color="variables.menuText"
      :active-text-color="variables.menuActiveText"
      mode="horizontal"
    >
      <sidebar-item
        v-for="route in secondMenu"
        :item="route"
        :key="route.path"
      />
    </el-menu>
  </el-scrollbar>
</template>

<script setup lang="ts">
import {computed, nextTick, onBeforeMount, onMounted, reactive, toRefs, watch} from 'vue';
import { useRoute } from 'vue-router';
import variables from '@/styles/variables.module.scss';
import useStore from '@/store';
import SidebarItem from '../Sidebar/SidebarItem.vue';
const { app } = useStore();

const route = useRoute();
const secondMenu = computed<any>({
  get: () => app.secondMenu,
  set: value => {
  }
});
const activeMenu = computed(() => {
  const {meta, path} = route;
  if (meta.activeMenu) {
    return meta.activeMenu as string;
  }
  return path;
})



</script>

<style lang="scss" scoped>
@import '@/styles/variables.module.scss';
//@import "@/styles/nav-menu.scss";
</style>
