<template>  
  <div> 
    <!-- <logo v-if="showLogo" :collapse="isCollapse" />  -->
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
        <transition mode="out-in">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="
          sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
        "
        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        :unique-opened="true"
        :active-text-color="theme"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="(route, index) in constantRoutes"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </transition>
    </el-scrollbar>
  </div>
</template>

<script setup>
import SidebarItem from './SidebarItem.vue'
import variables from '@/assets/styles/variables.module.scss'
import { useAppStore } from '@/stores/modules/app.js'
import { useSettingsStore } from '@/stores/modules/settings.js' 
import router, { constantRoutes, dynamicRoutes } from '@/router'


const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore() 

 
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)

const activeMenu = computed(() => {
  const { meta, path } = route 
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})
</script>
