<template>
    <el-aside v-if="!navTabs.state.tabFullScreen" :class="['layout-aside-' + config.layout.layoutMode, config.layout.shrink ? 'shrink' : '']">
        <Logo v-if="config.layout.menuShowTopBar" />
        <MenuVerticalChildren v-if="config.layout.layoutMode == 'Double'" />
        <MenuVertical v-else />
    </el-aside>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Logo from '/@/layouts/backend/components/logo.vue'
import MenuVertical from '/@/layouts/backend/components/menus/menuVertical.vue'
import MenuVerticalChildren from '/@/layouts/backend/components/menus/menuVerticalChildren.vue'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'
import { SYSTEM_ZINDEX } from '/@/stores/constant/common'

defineOptions({
    name: 'layout/aside',
})

const config = useConfig()
const navTabs = useNavTabs()

const menuWidth = computed(() => config.menuWidth())
</script>

<style scoped lang="scss">
.layout-aside-Default:not(.shrink) {
    background: var(--ba-bg-color-overlay);
    margin: var(--ba-main-space) 0 var(--ba-main-space) var(--ba-main-space);
    height: calc(100% - (var(--ba-main-space) * 2));
    border: 1px solid var(--ba-border-color-soft);
    box-shadow: var(--ba-shadow-card);
    border-radius: var(--ba-radius-panel);
    overflow: hidden;
    transition:
        width 0.26s ease,
        box-shadow 0.26s ease;
    width: v-bind(menuWidth);
}
.layout-aside-Default.shrink,
.layout-aside-Classic,
.layout-aside-Double {
    background: var(--ba-bg-color-overlay);
    margin: 0;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--ba-border-color-soft);
    transition: width 0.26s ease;
    width: v-bind(menuWidth);
}
.shrink {
    position: fixed;
    top: 0;
    left: 0;
    z-index: v-bind('SYSTEM_ZINDEX');
}
</style>
