forked from DebaucheryLibrarian/traxxx
139 lines
2.7 KiB
Vue
139 lines
2.7 KiB
Vue
<template>
|
|
<header class="header">
|
|
<router-link
|
|
to="/"
|
|
class="logo-link"
|
|
><h1 class="logo">traxxx</h1></router-link>
|
|
|
|
<nav class="nav">
|
|
<ul class="nolist">
|
|
<li class="nav-item">
|
|
<router-link
|
|
to="/actors"
|
|
class="nav-link"
|
|
:class="{ active: active === 'actors' }"
|
|
>
|
|
<Icon icon="stars" /><span class="nav-label">Actors</span>
|
|
</router-link>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<router-link
|
|
to="/networks"
|
|
class="nav-link"
|
|
:class="{ active: active === 'networks' }"
|
|
>
|
|
<Icon icon="earth2" /><span class="nav-label">Networks</span>
|
|
</router-link>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<router-link
|
|
to="/tags"
|
|
class="nav-link"
|
|
:class="{ active: active === 'tags' }"
|
|
>
|
|
<Icon icon="price-tags" /><span class="nav-label">Tags</span>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
function active() {
|
|
return this.$route.name;
|
|
}
|
|
|
|
export default {
|
|
computed: {
|
|
active,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'theme';
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
background: $background;
|
|
color: $primary;
|
|
border-bottom: solid 1px $shadow-hint;
|
|
font-size: 0;
|
|
}
|
|
|
|
.logo-link {
|
|
color: inherit;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo {
|
|
display: inline-block;
|
|
padding: .5rem 1rem;
|
|
margin: 0 1rem 0 0;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.nav {
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
border-bottom: solid 5px transparent;
|
|
color: $shadow;
|
|
text-decoration: none;
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
|
|
.icon {
|
|
fill: $shadow;
|
|
margin: 0 .5rem 0 0;
|
|
}
|
|
|
|
&.active {
|
|
color: $primary;
|
|
border-bottom: solid 5px $primary;
|
|
|
|
.icon {
|
|
fill: $primary;
|
|
}
|
|
}
|
|
|
|
&:hover:not(.active) {
|
|
color: $primary;
|
|
|
|
.icon {
|
|
fill: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width: $breakpoint0) {
|
|
.nav-label {
|
|
display: none;
|
|
}
|
|
|
|
.nav .nolist {
|
|
display: flex;
|
|
}
|
|
|
|
.nav,
|
|
.nav-item {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.nav-link {
|
|
|
|
|
|
}
|
|
}
|
|
</style>
|