<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-06-25 23:01:29
 * @LastEditors: 舟舟
 * @LastEditTime: 2022-07-26 15:32:46
 * @FilePath: /ouicai_web_framework_vite_ep/src/layouts/backend/components/aside.vue
-->
<template>
    <el-aside v-if="!navTabs.state.tabFullScreen" :class="'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : '')">
        <Logo v-if="config.layout.menuShowTopBar" />
        <MenuVertical />
        </el-aside>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Logo from './logo.vue'
import MenuVertical from './menuVertical.vue'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'

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

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

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'layout/aside',
})
</script>

<style scoped lang="scss">
.layout-aside-Default {
    background: var(--color-basic-white);
    margin: 16px 0 16px 16px;
    height: calc(100vh - 32px);
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
    overflow: hidden;
    transition: width 0.3s ease;
    width: v-bind(menuWidth);
    box-shadow: rgb(0 21 41 / 35%) 2px 0px 6px;
    z-index: 1;
}
.layout-aside-Classic {
    background: var(--color-basic-white);
    margin: 0px;
    height: 100vh;
    overflow: hidden;
    transition: width 0.3s ease;
    width: v-bind(menuWidth);
    box-shadow: rgb(0 21 41 / 35%) 2px 0px 6px;
    z-index: 1;
}
.shrink {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}
</style>
