hypothetical/resources/components/sections/nav.vue

57 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<nav class="nav-section-component">
<div class="nav-section-component-mobile-header">
<button
class="nav-section-component-mobile-header-toggle"
:class="{ open: openNav }"
@click="openNav = !openNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
2021-05-21 22:33:55 -04:00
<span class="visually-hidden">Toggle navigation</span>
</button>
</div>
<div class="nav-section-component-links" :class="{ open: openNav }">
<div class="nav-section-component-links-wrapper">
<router-link
v-for="link in navLinks"
2019-02-14 22:44:29 -05:00
:key="link.path.replace(/^\//, '').replace(/\//, '-')"
class="navlink"
:to="link.path"
exact>
<span>{{ link.title }}</span>
</router-link>
</div>
</div>
<router-link class="nav-section-component-logo" to="/" exact>
<img src="/img/logo.png" />
</router-link>
</nav>
</template>
<script>
export default {
data() {
return {
openNav: false,
navLinks: [
{ path: "/", title: "Home" },
{ path: "/blog", title: "Blog" },
{ path: "/contact", title: "Contact" }
]
};
},
watch: {
"$route"(to, from) {
this.openNav = false;
}
}
};
</script>