<template>
    <Header>
        <Menu mode="horizontal" theme="dark" active-name="1" class="header-menu">
            <a class="header-logo" href="/"></a>
            <div class="header-nav">
                <MenuItem name="1">
                    <Icon type="log-out"></Icon>
                    <span @click="logout">退出</span>
                </MenuItem>
            </div>
        </Menu>
    </Header>
</template>

<script>
export default {
    methods: {
        logout() {
            location.href = '/logout'
        }
    }
}
</script>

<style scoped lang="scss">
.header-menu {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}

.header-logo {
    display: block;
    width: 150px;
    height: 60px;
    background: url("../../../images/logo.png");
    filter: invert(100%);
    margin-left: -15px;
}

.header-nav {
    li:last-child {
        padding-right: 0;
    }
}
</style>