<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-06-25 23:01:29
 * @LastEditors: 舟舟
 * @LastEditTime: 2022-07-26 15:45:42
 * @FilePath: /ouicai_web_framework_vite_ep/src/layouts/backend/components/navBar/classic.vue
-->
<template>
    <div>
        <div class="nav-menu">
            <NavMenus />
        </div>
        <div class="nav-bar">
            <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
                <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.layout.menuActiveColor" size="18" />
            </div>
            <NavTabs v-if="!config.layout.shrink" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useConfig } from '/@/stores/config'
import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
import NavMenus from '../navMenus.vue'
import { showShade } from '/@/utils/pageShade'

const config = useConfig()

const onMenuCollapse = () => {
    showShade('ba-aside-menu-shade', () => {
        config.setLayout('menuCollapse', true)
    })
    config.setLayout('menuCollapse', false)
}
</script>

<style scoped lang="scss">
.nav-menu {
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    height: 64px;
    width: 100%;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}
.nav-bar {
    display: flex;
    height: 40px;
    width: 100%;
    margin-top: 7px;
    margin-left: 10px;
    //background-color: v-bind('config.layout.headerBarBackground');
    :deep(.nav-tabs) {
        display: flex;
        height: 100%;
        width: 100% !important;
        position: relative;
        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            cursor: pointer;
            z-index: 1;
            height: 32px;
            background-color: #fff;
            border-radius: 3px;
            border: none;
            margin-right: 6px;
            user-select: none;
            color: v-bind('config.layout.headerBarTabColor');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }
            .close-icon:hover {
                background: var(--color-primary-sub-0);
                color: var(--color-sub-1) !important;
                border-radius: 50%;
            }
            &.active {
                color: v-bind('config.layout.headerBarTabActiveColor');
            }
            &:hover {
                color: v-bind('config.layout.headerBarHoverColor');
            }
        }
        .nav-tabs-active-box {
            position: absolute;
            height: 50px;
            background-color: v-bind('config.layout.headerBarTabActiveBackground');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }
}
.unfold {
    align-self: center;
    padding-left: var(--main-space);
}
.el-menu-item.is-active {
    background-color: #fff;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    color: var(--el-menu-hover-text-color);
    background-color: #fff;
}
</style>
