ClearBowl/front/components/Layout/ClearBowlHeader.vue

<template>
  <Header>
    <Menu mode="horizontal" theme="dark" active-name="1">
      <NuxtLink to="/">
        <div class="layout-logo">
          <img class="logo" src="../../static/bowl.png"/>
          <div class="logo-text">ClearBowl</div>
        </div>
      </NuxtLink>
      <div v-if="!$auth.loggedIn" class="layout-nav">
        <NuxtLink to="/login">
          <MenuItem name="login">
            <Icon type="ios-log-in" size="20"/>
            Zaloguj
          </MenuItem>
        </NuxtLink>
        <NuxtLink to="/register">
          <MenuItem name="register">
            <Icon type="ios-person-add" size="20"/>
            Zarejestruj
          </MenuItem>
        </NuxtLink>
      </div>
      <div v-else class="layout-nav">
        <div style="display: flex">
          <div>Witaj, {{ $auth.user.email }}</div>
          <MenuItem name="logout">
            <div @click="logout">
              <Icon type="ios-log-out" size="20"/>
              <span>Wyloguj</span>
            </div>
          </MenuItem>
        </div>
      </div>
    </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;
  }

  .layout-nav {
    width: 320px;
    margin: 0 auto;
    margin-right: 20px;
  }

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

</style>