<template>
    <div class="nav-bar" :class="config.layout.shrink ? 'shrink' : ''">
        <!-- 小屏设备下的展开菜单按钮 -->
        <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
            <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')" size="18" />
        </div>
        <NavTabs v-if="!config.layout.shrink" ref="layoutNavTabsRef" />
        <NavMenus />
    </div>
</template>

<script setup lang="ts">
import { useConfig } from '/@/stores/config'
import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
import NavMenus from '../navMenus.vue'
import { layoutNavTabsRef } from '/@/stores/refs'
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 lang="scss" scoped>
.nav-bar {
    display: flex;
    height: 52px;
    margin: var(--ba-main-space) var(--ba-main-space) 0 var(--ba-main-space);
    gap: 12px;
    :deep(.nav-tabs) {
        display: flex;
        height: 100%;
        position: relative;
        min-width: 0;
        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 18px;
            cursor: pointer;
            z-index: 1;
            user-select: none;
            opacity: 0.78;
            color: v-bind('config.getColorVal("headerBarTabColor")');
            border-radius: var(--ba-radius-control);
            transition:
                opacity 0.2s ease,
                color 0.2s ease,
                background-color 0.2s ease;
            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }
            .close-icon:hover {
                background: var(--el-color-primary-light-8);
                color: var(--el-color-primary) !important;
                border-radius: 50%;
            }
            &.active {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
                font-weight: 600;
            }
            &:hover {
                opacity: 1;
                background: v-bind('config.getColorVal("headerBarHoverBackground")');
            }
        }
        .nav-tabs-active-box {
            position: absolute;
            height: 38px;
            top: 7px;
            border-radius: var(--ba-radius-control);
            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
            border: 1px solid var(--ba-border-color-soft);
            box-shadow: var(--ba-shadow-card);
            transition:
                transform 0.2s ease,
                width 0.2s ease,
                left 0.2s ease;
            -webkit-transition:
                transform 0.2s ease,
                width 0.2s ease,
                left 0.2s ease;
        }
    }
}
.nav-bar.shrink {
    width: 100%;
    background-color: v-bind('config.getColorVal("headerBarBackground")');
    margin: 0;
    border-bottom: 1px solid var(--ba-border-color-soft);
    .unfold {
        align-self: center;
        padding-left: var(--ba-main-space);
    }
}
</style>
