<template>
    <div class="app-navbar" :style="{height: $state.navbar.height}">
        <div class="app-hamburger" @click="switchCollapse">
            <!-- 切换 -->
            <ElIcon :size="32">
                <Fold v-if="!$state.collapse" />
                <Expand v-else />
            </ElIcon>
        </div>

        <div class="app-navbar-menu">
            <div>Alibob</div>
        </div>

    </div>
</template>
<script setup>
import { Fold, Expand } from '@element-plus/icons-vue'
import { getState, useConfig } from '../hooks'
const $state = getState();
const $config = useConfig();
const switchCollapse = () => {
    $config.update({
        collapse: !$state.collapse
    })
}
</script>
<style>
.app-navbar {
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0px -1px 5px 2px rgba(100, 100, 100, 0.2) inset;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-hamburger {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}
</style>