<script setup lang="ts">
// 移动端菜单展开状态
import MobileMenu from "~/components/Home/MobileMenu.vue";

const menuMobileExpandStatus = ref(false)
</script>

<template>
    <header class="homeHeader relative flex">
        <div class="logoContainer">
            <Logo/>
        </div>
        <nav>
            <div class="mobileIcon" @click="menuMobileExpandStatus = !menuMobileExpandStatus">
            </div>
            <MobileMenu :menuMobileExpandStatus/>
            <slot name="navBar"></slot>
        </nav>
        <div class="infoContainer">
            <div class="mobileIcon"></div>
        </div>
    </header>
</template>

<style scoped>


/* 手机端 */
@media (max-width: 767px) {
    .homeHeader {
        position: relative;
        height: 2.5rem;

        div.logoContainer{
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-color-bd);
        }

        nav > div.mobileIcon{
            position: absolute;
            left: 0;
            top: 0;
            &::before{
                position: relative;
                height: 2.5rem;
                font-family: "cocoIconFont" !important;
                content: "\e661";
                color: var(--color-text);
                font-size: 1.6rem;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.5rem;
            }
        }

        div.infoContainer > div.mobileIcon{
            position: absolute;
            right: 0;
            top: 0;
            &::before{
                position: relative;
                height: 2.5rem;
                font-family: "cocoIconFont" !important;
                content: "\e678";
                color: var(--color-text);
                font-size: 1.6rem;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.5rem;
            }
        }
    }
}
/* 平板及以上 */
@media (min-width: 768px) {
    .homeHeader {
        position: relative;
        display: flex;
        height: 4rem;
        & > * {
            position: relative;
            height: 100%;
        }

        div.logoContainer{
            flex: 1;

        }

        nav{
            flex-shrink: 0;
            width: var(--main-width-auto);
            background-color: var(--bg-color-b1);
        }

        div.infoContainer{
            flex: 1;
        }
    }
}
</style>
