<template>
    <div class="app-sidebar" :style="{width: $getters.sidebarWidth.value, background: $state.menuStyle.backgroundColor}">
        <Logo />
        <ElScrollbar wrap-class="scrollbar-wrapper" :height="$getters.sidebarHeight.value" always>
            <ElMenu class="app-sidebar-menu" mode="vertical" :collapse="$state.collapse" :collapse-transition="false"
                :default-active="currentRoute?.path" v-bind="$state.menuStyle">
                <template v-for="item in $routes.routes">
                    <SideBarItem :item="item" v-if="!item.hidden" :key="item.path" />
                </template>
            </ElMenu>
        </ElScrollbar>
    </div>
</template>
<script setup>
import { SideBarItem, Logo } from './index'
import { getRoutes, getState, getGetters } from '../hooks'
import { useRoute } from 'vue-router'
const $routes = getRoutes()
const $state = getState()
const $getters = getGetters(['sidebarHeight', 'sidebarWidth'])
const currentRoute = useRoute()

</script>
<style>
.app-sidebar {
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1001;
}

.el-aside {
    transition: width 0.15s
}

.collapse-transition {
    transition: none;
}

.app-sidebar .app-sidebar-menu {
    border-right: none;
}
</style>