forked from Ivasoft/traefik
98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
<template>
|
|
<q-header class="shadow-1">
|
|
<section class="app-section bg-primary text-white">
|
|
<div class="app-section-wrap app-boxed app-boxed-xl">
|
|
<q-toolbar class="row no-wrap items-center">
|
|
<div class="q-pr-md logo">
|
|
<img alt="logo" src="~assets/logo.svg">
|
|
</div>
|
|
<q-tabs align="left" inline-label indicator-color="transparent" active-color="white" stretch>
|
|
<q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
|
|
</q-tabs>
|
|
<q-space />
|
|
<q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
|
|
<q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="`${name} ${version}`" class="btn-menu" />
|
|
</q-toolbar>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="app-section bg-white text-black">
|
|
<div class="app-section-wrap app-boxed app-boxed-xl">
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
</q-header>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '../../../package'
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'NavBar',
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('core', { coreVersion: 'version' }),
|
|
version () {
|
|
return this.coreVersion.Version
|
|
},
|
|
parsedVersion () {
|
|
if (this.version === undefined) {
|
|
return 'master'
|
|
}
|
|
if (this.version === 'dev') {
|
|
return 'master'
|
|
}
|
|
const matches = this.version.match(/^(v?\d+\.\d+)/)
|
|
return matches ? 'v' + matches[1] : 'master'
|
|
},
|
|
name () {
|
|
return config.productName
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions('core', { getVersion: 'getVersion' })
|
|
},
|
|
created () {
|
|
this.getVersion()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../css/sass/variables";
|
|
|
|
.q-toolbar {
|
|
min-height: 64px;
|
|
}
|
|
|
|
.logo {
|
|
display: inline-block;
|
|
img {
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
.q-tabs {
|
|
color: rgba( $app-text-white, .4 );
|
|
/deep/ .q-tabs__content {
|
|
.q-tab__content{
|
|
min-width: 100%;
|
|
.q-tab__label {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-menu{
|
|
color: rgba( $app-text-white, .4 );
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|