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 &amp; 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 &amp; Climbing</a></li>
                <li><a href="#">Hunting</a></li>
                <li><a href="#">Lighthouses &amp; Sightseeing</a></li>
                <li><a href="#">Shopping</a></li>
                <li><a href="#">Spas, Health &amp; 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>
  • Content:
    <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>
    
  • URL: /components/raw/mobile-navigation/BpMobileNavigation.vue
  • Filesystem Path: resources/styles/organisms/mobile-navigation/BpMobileNavigation.vue
  • Size: 2.4 KB
  • Content:
    @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;
        }
    }
    
  • URL: /components/raw/mobile-navigation/_index.scss
  • Filesystem Path: resources/styles/organisms/mobile-navigation/_index.scss
  • Size: 517 Bytes