ClearBowl/front/components/Layout/ClearBowlHeader.vue

<template>
    <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
            <Row>
                <Col span="8">
                    <NuxtLink to="/">
                        <div class="layout-logo">
                            <img class="logo" src="../../static/bowl.png"/>
                            <div class="logo-text">ClearBowl</div>
                        </div>
                    </NuxtLink>
                </Col>
                <Col span="8" offset="8">
                    <div v-if="!$auth.loggedIn">
                        <Row style="margin-bottom: 10px;">
                            <Col span="12" style="text-align: right; padding-left: 23%">
                                <NuxtLink to="/login">
                                    <MenuItem name="login">
                                        <Icon type="ios-log-in" size="20"/>
                                        Zaloguj
                                    </MenuItem>
                                </NuxtLink>
                            </Col>
                            <Col span="12">
                                <NuxtLink to="/register">
                                    <MenuItem name="register">
                                        <Icon type="ios-person-add" size="20"/>
                                        Zarejestruj
                                    </MenuItem>
                                </NuxtLink>
                            </Col>
                        </Row>
                    </div>
                    <div v-else>
                        <Row style="margin-bottom: 10px;">
                            <Col span="16" style="text-align: right">
                                <div>Witaj, {{ $auth.user.email }}</div>
                            </Col>
                            <Col span="8">
                                <MenuItem name="logout">
                                    <div @click="logout">
                                        <Icon type="ios-log-out" size="20"/>
                                        <span>Wyloguj</span>
                                    </div>
                                </MenuItem>
                            </Col>
                        </Row>
                    </div>
                </Col>
            </Row>
        </Menu>
    </Header>
</template>

<script>
    export default {
        name: "ClearBowlHeader",
        methods: {
            logout() {
                this.$auth.logout()
            }
        }
    }
</script>

<style scoped>

    .ivu-menu-dark {
        background: white;
    }

    .ivu-layout-header {
        background: white;
        border-bottom: black solid;
        border-width: thin;
    }

    .layout-logo {
        background: transparent;
        float: left;
        position: relative;
        top: 10px;
        left: 20px;
    }

    .logo {
        max-width: 40px;
        max-height: 40px;
    }

    .logo-text {
        color: black;
        float: right;
        font-size: 30px;
        margin-top: -7px;
        margin-left: 5px;
    }

    .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
        color: black;
    }

</style>