bartvdbraak/SlayerWeightCalculator
1
0
Fork 0
mirror of https://github.com/bartvdbraak/SlayerWeightCalculator.git synced 2025-07-07 03:39:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

routes fixed, active classes for nav

Browse source
This commit is contained in:
Bart van der Braak 2020-01-31 22:49:39 +01:00
parent 506db21776
commit e7fb7c26f5
6 changed files with 34 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/LeftNav.vue
View file

@ -1,20 +1,20 @@
<template >
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<nav class="col-md-2 d-none d-md-block bg-light sidebar" @click="activate">
<div class="sidebar-sticky">
<ul class="nav flex-column mb-2">
<NavItem v-for="link in links" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :to="link.to"/>
<NavItem v-for="link in links" :isActive="activate(link.id)" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :to="link.to"/>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Slayer Masters</span>
</h6>
<ul class="nav flex-column mb-2">
<NavItem v-for="master in masters" :key="master.id" :title="master.name" :id="master.id" :icon_url="master.image" :to="'master'"/>
<NavItem v-for="master in masters" :isActive="activate(master.id)" :key="master.id" :title="master.name" :id="master.id" :icon_url="master.image" :to="'master'"/>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Other Links</span>
</h6>
<ul class="nav flex-column mb-2">
<NavItem v-for="link in extraLinks" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :url="link.url"/>
<NavItem v-for="link in extraLinks" :isActive="activate(link.id)" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :url="link.url"/>
</ul>
</div>
</nav>
@ -50,6 +50,11 @@ export default {
]
}
},
methods: {
activate(id) {
return this.$route.params.id == id;
},
}
}
</script>