111 lines
2.0 KiB
Vue
111 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
class="h-100"
|
|
:class="level === 0 ? 'd-flex align-items-center' : ''"
|
|
>
|
|
<div
|
|
v-for="(item,index) in nodes"
|
|
:key="index"
|
|
class="nav-link-item d-flex align-items-center justify-content-center"
|
|
>
|
|
<div @click="toChange" v-if="item.children.length === 0">
|
|
<nuxt-link
|
|
:to="item.to"
|
|
>
|
|
{{ item.label }}
|
|
</nuxt-link>
|
|
</div>
|
|
<b-nav-item-dropdown
|
|
v-else
|
|
:id="item.id"
|
|
:text="item.label"
|
|
right
|
|
@show="isDropdown=true"
|
|
v-model="isDropdown"
|
|
@hide="dropdownHide($event, item)"
|
|
>
|
|
<header-nav
|
|
:nodes="item.children"
|
|
:level="level + 1"
|
|
@dropDownHide="dropDownHide"
|
|
/>
|
|
</b-nav-item-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'HeaderNav',
|
|
props: {
|
|
level: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
nodes: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isDropdown: true
|
|
}
|
|
},
|
|
methods: {
|
|
toChange() {
|
|
this.isDropdown = false
|
|
this.$emit('dropDownHide')
|
|
},
|
|
dropDownHide() {
|
|
this.isDropdown = false
|
|
this.$emit('dropDownHide')
|
|
},
|
|
dropdownHide(e, item) {
|
|
if (this.isDropdown) {
|
|
e.preventDefault()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin activeNav {
|
|
&:hover {
|
|
position: relative;
|
|
color: #015fe8;
|
|
background: linear-gradient( 180deg, rgba(1,95,232,0) 0%, rgba(1,95,232,0.08) 100%);
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: .125rem;
|
|
background: #015fe8;
|
|
}
|
|
>a {
|
|
color: #015fe8;
|
|
}
|
|
}
|
|
}
|
|
.nav-link-item {
|
|
height: 100%;
|
|
padding: 0 1.4375rem;
|
|
>a {
|
|
color: #151516;
|
|
span {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
@include activeNav;
|
|
}
|
|
.active-item {
|
|
@include activeNav;
|
|
}
|
|
|
|
</style> |