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="menuEl"
class="mobileNav__menu"
>
<slot />
</nav>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import MmenuLight from 'mmenu-light'
let drawer = null
const menuEl = ref(null)
const props = defineProps({
title: {
type: String,
required: true,
},
mediaQuery: {
type: String,
default: '(max-width: 624px)',
},
buttonClass: {
type: String,
default: 'button -primary -ghost',
},
navigationOptions: {
type: Object,
default: (props) => ({
title: props.title,
}),
},
offcanvasOptions: {
type: Object,
default: null,
},
})
const isOpen = () => {
return drawer.wrapper.matches('.mm-ocd--open')
}
const onKeyDown = event => {
if (event.key === 'Escape' && isOpen()) {
close()
}
}
const open = () => drawer.open()
const close = () => drawer.close()
onMounted(() => {
const menu = new MmenuLight(menuEl.value, props.mediaQuery)
menu.navigation(props.navigationOptions)
drawer = menu.offcanvas(props.offcanvasOptions)
document.addEventListener('keydown', onKeyDown)
})
</script>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
:root {
--mm-spn-item-height: #{config.$line-height * config.$font-size + 2 * config.$v-space};
--mm-spn-item-indent: #{config.$h-space};
--mm-spn-line-height: #{config.$line-height * config.$font-size};
}
.mobileNav {
$b: &;
&__button {
display: flex;
padding: config.$v-space;
}
&__icon {
width: 1.5rem;
height: 1.5rem;
}
@include at(lg) {
display: none;
}
}