<template>
    <div class="layout-header">
        <div class="header-left">
            <XIcon :name="collapseMenu ? 'menu-unfold-fill' : 'menu-fold-fill'" size="16" @click="handleCollapse" />
            <LayoutBreakcrumb />
        </div>
        <div class="header-right">
            <LayoutOperation />
            <LayoutProfile />
        </div>
    </div>
</template>

<script setup>
    import LayoutBreakcrumb from './breakcrumb.vue';
    import LayoutProfile from './profile.vue';
    import LayoutOperation from './operation.vue';
    const store = useStore();
    const collapseMenu = computed(() => store.getters['layout/collapseMenu']);
    const handleCollapse = () => {
        store.commit('layout/setCollapseMenu', !unref(collapseMenu));
    };
</script>

<style lang="less" scoped>
    .layout-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: @layout-header-bgc;
        color: @layout-header-fc;
        box-shadow: @layout-shadow;
        .header-left,
        .header-right {
            height: @layout-header-height;
            padding: 0 @layout-space-large;
            display: flex;
            align-items: center;
        }
        .x-icon {
            border-radius: @layout-border-radius;
            cursor: pointer;
        }
    }
</style>
