<template>
    <div class='nav-bar'>
        <NavTabs  />
    </div>
</template>

<script setup lang='ts'>
import { useConfig } from '@/stores/config'
import NavTabs from '@/layouts/admin/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-bar {
    display: flex;
    height: 45px;
    width: 100%;
    padding: 10px 10px 0;
    :deep(.nav-tabs) {
        display: flex;
        height: 100%;
        position: relative;

        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            z-index: 1;
            height: 100%;
            user-select: none;
            background: #fff;
            color:#111;
            margin-right: 10px;
            transition: all .2s;
            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }

            &.active {
                color: #fff;
                background: var(--el-color-primary);
                .close-icon {
                    color: #fff !important;
                }
            }
        }

        .nav-tabs-active-box {
            position: absolute;
            height: 50px;
            //background: var(--el-color-primary);
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }
}

.unfold {
    align-self: center;
    padding-left: var(--ba-main-space);
}
</style>
