Using router-link slots for header link indicators. Added release cache to store.

This commit is contained in:
ThePendulum 2020-02-10 02:05:28 +01:00
parent 2f66e36c28
commit 4c7c3c2ff4
4 changed files with 48 additions and 24 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<header class="header"> <header class="header">
<router-link <router-link
to="/" to="/home"
class="logo-link" class="logo-link"
><h1 class="logo"><Icon icon="logo" /></h1></router-link> ><h1 class="logo"><Icon icon="logo" /></h1></router-link>
@ -9,31 +9,46 @@
<ul class="nolist"> <ul class="nolist">
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ isActive, navigate }"
to="/actors" to="/actors"
>
<a
class="nav-link" class="nav-link"
:class="{ active: active === 'actors' }" :class="{ active: isActive }"
@click="navigate"
> >
<Icon icon="stars" /><span class="nav-label">Actors</span> <Icon icon="stars" /><span class="nav-label">Actors</span>
</a>
</router-link> </router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ isActive, navigate }"
to="/networks" to="/networks"
>
<a
class="nav-link" class="nav-link"
:class="{ active: active === 'networks' }" :class="{ active: isActive }"
@click="navigate"
> >
<Icon icon="earth2" /><span class="nav-label">Networks</span> <Icon icon="earth2" /><span class="nav-label">Networks</span>
</a>
</router-link> </router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ isActive, navigate }"
to="/tags" to="/tags"
>
<a
class="nav-link" class="nav-link"
:class="{ active: active === 'tags' }" :class="{ active: isActive }"
@click="navigate"
> >
<Icon icon="price-tags" /><span class="nav-label">Tags</span> <Icon icon="price-tags" /><span class="nav-label">Tags</span>
</a>
</router-link> </router-link>
</li> </li>
</ul> </ul>
@ -41,18 +56,6 @@
</header> </header>
</template> </template>
<script>
function active() {
return this.$route.name;
}
export default {
computed: {
active,
},
};
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'theme'; @import 'theme';
@ -97,6 +100,7 @@ export default {
text-decoration: none; text-decoration: none;
font-size: .9rem; font-size: .9rem;
font-weight: bold; font-weight: bold;
cursor: pointer;
.icon { .icon {
fill: $shadow; fill: $shadow;

View File

@ -17,6 +17,10 @@ import Releases from '../releases/releases.vue';
async function fetchReleases() { async function fetchReleases() {
this.releases = await this.$store.dispatch('fetchReleases', { limit: 100 }); this.releases = await this.$store.dispatch('fetchReleases', { limit: 100 });
this.$store.commit('setCache', {
target: 'home',
releases: this.releases,
});
} }
async function mounted() { async function mounted() {
@ -39,6 +43,7 @@ export default {
}, },
data() { data() {
return { return {
// releases: this.$store.state.releases.cache.home || [], // slows down apparent page load
releases: [], releases: [],
networks: [], networks: [],
pageTitle: null, pageTitle: null,

View File

@ -1 +1,14 @@
export default {}; import Vue from 'vue';
function setCache(state, { target, releases }) {
Vue.set(state.cache, target, releases);
}
function deleteCache(state, target) {
Vue.delete(state.cache, target);
}
export default {
setCache,
deleteCache,
};

View File

@ -1 +1,3 @@
export default {}; export default {
cache: {},
};