<template>
  <!--侧边栏-->
  <el-aside
    class="layout-aside main-color-bg font-color-active wow animate__animated animate__slideInLeft"
    data-wow-duration=".5s"
    data-wow-delay=".3s"
    id="layout-aside"
    width="auto"
    :style="{ minWidth: !menuIsCollapse ? '220px' : 0 }"
  >
    <!--系统logo区域-->
    <LayoutAsideLogo :menuIsCollapse="menuIsCollapse" :fontColor="fontColor" />
    <!--菜单栏-->
    <el-scrollbar class="aside-menu-scroll">
      <LayoutAsideMenu :menuIsCollapse="menuIsCollapse" />
    </el-scrollbar>
  </el-aside>
</template>

<script lang="ts" setup>
import LayoutAsideLogo from '@/layout/components/LayoutAside/components/AsideLogo.vue'
import LayoutAsideMenu from '@/layout/components/LayoutAside/components/AsideMenu.vue'
import { useLayoutStore } from '@/store/layout'
import { useThemeStore } from '@/store/theme'
import { storeToRefs } from 'pinia'

/* 菜单区域 */
// 获取pinia共享数据
const layoutStore = useLayoutStore()
const themeStore = useThemeStore()
const { menuIsCollapse } = storeToRefs(layoutStore)
// const { mainColor, fontColor, fontColorActive } = storeToRefs(themeStore)
const { fontColor } = storeToRefs(themeStore)
</script>
<style lang="scss" scoped>
.layout-aside {
  @include flexCol;

  //background: v-bind(mainColor);
  //color: v-bind(fontColorActive);
  max-width: 260px;
  transition: all 0.3s;
  border-right: 0.5px solid v-bind(fontColor);
  .aside-menu-scroll {
    height: 100vh;
    :deep(.el-scrollbar__view) {
      height: 100%;
    }
  }
}
</style>
