<template>
  <el-aside class="layout-aside" :class="asideWidth">
    <Logo v-if="isShowLogo" />
    <el-scrollbar>
      <MenuVertical v-if="menuList" :menuList="menuList" />
    </el-scrollbar>
  </el-aside>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import MenuVertical from "../aside-navbars/menu-vertical.vue";
import Logo from "../logo/index.vue";
import { useStore } from "@/hooks/useStore";

export default defineComponent({
  name: "Aside",
  setup() {
    const store = useStore();

    const menuList = computed(() => {
      return store.state.routeList.routeList[0].children;
    });

    const isShowLogo = computed(() => {
      return store.state.themeConfig.isShowLogo;
    });

    const asideWidth = computed(() => {
      const { isCollapse } = store.state.themeConfig;
      return isCollapse ? ["aside-width64"] : ["aside-width-default"];
    });

    return {
      menuList,
      isShowLogo,
      asideWidth,
    };
  },

  components: {
    MenuVertical,
    Logo,
  },
});
</script>
