No notes defined.
<bp-mobile-navigation title="Example Menu" class="">
<ul class="mobileNav__list">
<li class="mobileNav__item">
<a href="">Maine</a>
<ul>
<li><a href="#">Bar Harbor</a></li>
<li><a href="#">Camden</a></li>
<li><a href="#">Castine</a></li>
<li><a href="#">Damariscotta</a></li>
<li><a href="#">Kennebunkport</a></li>
<li><a href="#">Old Orchard Beach</a></li>
<li><a href="#">Portland</a></li>
<li><a href="#">Rockland</a></li>
<li><a href="#">Stonington</a></li>
<li><a href="#">Acadia</a></li>
<li><a href="#">Baxter</a></li>
<li><a href="#">Camden Hills</a></li>
<li><a href="#">Popham Beach</a></li>
<li><a href="#">Quoddy Head</a></li>
<li><a href="#">Reid</a></li>
<li><a href="#">Agricultural Attractions</a></li>
<li><a href="#">Arts & Culture</a></li>
<li><a href="#">Camping</a></li>
<li><a href="#">Fishing</a></li>
<li><a href="#">Guide Services</a></li>
<li><a href="#">Hiking & Climbing</a></li>
<li><a href="#">Hunting</a></li>
<li><a href="#">Lighthouses & Sightseeing</a></li>
<li><a href="#">Shopping</a></li>
<li><a href="#">Spas, Health & Wellness</a></li>
<li><a href="#">Wildlife Watching</a></li>
<li><a href="#">Winter Activities</a></li>
</ul>
</li>
<li class="mobileNav__item">
<a href="">New Hampshire</a>
<ul>
<li><a href="#">Manchester</a></li>
<li><a href="#">Portsmouth</a></li>
<li><a href="#">Sunapee</a></li>
<li><a href="#">Concord</a></li>
<li><a href="#">Conway</a></li>
<li><a href="#">Keene</a></li>
<li><a href="#">Laconia</a></li>
</ul>
</li>
<li class="mobileNav__item">
<a href="">Massachusetts</a>
<ul>
<li><a href="#">Boston</a></li>
<li><a href="#">Cambridge</a></li>
<li><a href="#">Lowell</a></li>
<li><a href="#">Plymouth</a></li>
<li><a href="#">Salem</a></li>
<li><a href="#">Springfield</a></li>
<li><a href="#">Worcester</a></li>
</ul>
</li>
</ul>
</bp-mobile-navigation>
<template>
<div class="mobileNav">
<slot name="button">
<button class="mobileNav__button" :class="buttonClass" @click="open">
<svg class="mobileNav__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="18" x2="20" y2="18" />
</svg>
</button>
</slot>
<nav ref="menu" class="mobileNav__menu">
<slot />
</nav>
</div>
</template>
<script>
import Vue from 'vue'
import MmenuLight from 'mmenu-light'
export default {
menu: null,
navigator: null,
drawer: null,
props: {
title: {
type: String,
},
mediaQuery: {
type: String,
},
buttonClass: {
type: String,
default: 'button -primary -ghost',
},
navigationOptions: {
type: Object,
default() {
return {
title: this.title,
}
},
},
offcanvasOptions: {
type: Object,
}
},
methods: {
/**
* Unfortunately this is not reactive; but still here for convienence.
*/
isOpen() {
return this.$options.drawer.wrapper.matches('.mm-ocd--open')
},
onKeyDown(event) {
if (event.key === 'Escape' && this.isOpen()) {
this.close();
}
},
open() {
this.$options.drawer.open()
},
close() {
this.$options.drawer.close()
},
},
mounted() {
this.$options.menu = new MmenuLight(this.$refs.menu, this.mediaQuery)
this.$options.navigator = this.$options.menu.navigation(this.navigationOptions)
this.$options.drawer = this.$options.menu.offcanvas(this.offcanvasOptions)
document.addEventListener('keydown', this.onKeyDown)
}
}
</script>
@import '~mmenu-light/dist/mmenu-light';
:root {
--mm-spn-item-height: #{$body-line-height * $body-font-size + 2 * $v-space};
--mm-spn-item-indent: #{$h-space};
--mm-spn-line-height: #{$body-line-height * $body-font-size};
}
.mobileNav {
&__button {
display: flex;
padding: $v-space;
}
&__icon {
width: 1.5rem;
height: 1.5rem;
}
@include at(lg) {
display: none;
}
}