<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>