-
Notifications
You must be signed in to change notification settings - Fork 6
/
NavBar.vue
88 lines (79 loc) 路 2.71 KB
/
NavBar.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
<header v-click-outside="closeAllDropdowns">
<!-- Burger menu for mobile-->
<Burger class="bigmac" @onBurgerChange="onBurgerChange" :startIsMenuOpen="isMenuOpen"/>
<!-- Main Logo and Title -->
<h1 class="logo">
<router-link to="/">
<img
v-if="logoPath"
:src="logoPath"
:alt="siteTitle"
v-click-outside="closeAllDropdowns"
/>
{{ siteTitle }}
</router-link>
</h1>
<!-- Main Navigation -->
<nav>
<ul class="main-nav" v-bind:class="{ menuOpen: isMenuOpen }">
<li v-for="navBarItem in navBarItems" v-bind:key="navBarItem.name" @mouseover="visibleDropdown = navBarItem.name">
<router-link :to="navBarItem.path">{{navBarItem.name}}</router-link>
<ul class="sub-nav" v-bind:class="{ open: visibleDropdown == navBarItem.name }" @mouseleave="closeAllDropdowns">
<li v-for="navBarItemChild in navBarItem.children" v-bind:key="navBarItemChild.name">
<router-link :to="navBarItemChild.path">{{navBarItemChild.name}}</router-link>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import NavBarItems from './../models/NavBarItems';
import Burger from './Burger.vue';
// tslint:disable:no-var-requires // Will I go to hell for this?
const ClickOutside = require('./../directives/ClickOutside.js');
// tslint:enable:no-var-requires // Probably, but it was worth it.
@Component({
props: [
'siteTitle', // Heading, shown in top left of navbar
'logoPath', // Optiopnal path to site logo, shown in top left
'navData', // The JSON of navbar content, will make up all the links
],
data: () => {
return {
visibleDropdown: '',
isMenuOpen: false, // start closed
};
},
computed: {
navBarItems() {
if (this.$props.navData) {
return (new NavBarItems()).makeTheFuckingNavbar(this.$props.navData);
} else {
return [];
}
},
},
methods: {
closeAllDropdowns() {
this.$data.visibleDropdown = '';
},
onBurgerChange(openOrClose) {
this.$data.isMenuOpen = openOrClose;
},
},
directives: {
ClickOutside,
},
components: {
Burger,
},
})
export default class NavBar extends Vue {}
</script>
<style lang="scss">
@import '../styles/navbar-styles.scss';
</style>