join_admin/src/layout/components/Navbar.vue

198 lines
4.4 KiB
Vue
Raw Normal View History

2019-12-03 18:03:25 +00:00
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">
<template v-if="device!=='mobile'">
<span class="coinclass">Münzen: {{ coins }}
</span>
<img src="@/assets/logo/coins.png" class="coinsimg">
2019-12-03 18:03:25 +00:00
<search id="header-search" class="right-menu-item" />
<error-log class="errLog-container right-menu-item hover-effect" />
<screenfull v-if="false" id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip v-if="false" content="Global Size" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/profile/index">
<el-dropdown-item>Profil</el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span style="display:block;" @click="logout">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import ErrorLog from '@/components/ErrorLog'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import request from '@/utils/request'
2019-12-03 18:03:25 +00:00
export default {
components: {
Breadcrumb,
Hamburger,
ErrorLog,
Screenfull,
SizeSelect,
Search
},
data() {
return {
coins: 0,
updateInterval: null
}
},
2019-12-03 18:03:25 +00:00
computed: {
...mapGetters([
'sidebar',
'avatar',
'device'
])
},
mounted() {
this.updateInterval = setInterval(() => {
request({
url: 'https://joinbot.tk/kvs/coinslukas',
method: 'get',
headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' }
}).then((result) => {
this.coins = result
}).catch((err) => {
console.log('ThaErr', err)
})
}, 1000)
},
beforeDestroy() {
clearInterval(this.updateInterval)
this.updateInterval = null
},
2019-12-03 18:03:25 +00:00
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
}
}
}
</script>
<style lang="scss" scoped>
.coinclass {
height: 70%;
vertical-align: text-bottom;
font-weight: bolder;
}
.coinsimg{
height: 28px;
margin-bottom: 10px;
padding-right: 10px;
}
2019-12-03 18:03:25 +00:00
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
.breadcrumb-container {
float: left;
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
</style>