105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
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>
|
|
|