ClearBowl/front/components/Layout/ClearBowlHeader.vue

105 lines
3.2 KiB
Vue
Raw Normal View History

<template>
2020-01-08 15:07:28 +01:00
<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">
2020-01-19 13:11:40 +01:00
<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>
2020-01-08 15:07:28 +01:00
</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>
2020-01-08 15:07:28 +01:00
export default {
name: "ClearBowlHeader",
methods: {
logout() {
this.$auth.logout()
}
}
}
</script>
<style scoped>
2020-01-08 15:07:28 +01:00
.ivu-menu-dark {
background: white;
}
2020-01-08 15:07:28 +01:00
.ivu-layout-header {
background: white;
border-bottom: black solid;
border-width: thin;
}
2020-01-08 15:07:28 +01:00
.layout-logo {
background: transparent;
float: left;
position: relative;
top: 10px;
left: 20px;
}
2020-01-08 15:07:28 +01:00
.logo {
max-width: 40px;
max-height: 40px;
}
2020-01-08 15:07:28 +01:00
.logo-text {
color: black;
float: right;
font-size: 30px;
margin-top: -7px;
margin-left: 5px;
}
2020-01-08 15:07:28 +01:00
.ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
color: black;
}
</style>