vue-wp/vue-theme/src/components/navigation/navigation.vue

// Replace with calls to menu system
<template lang="pug">
nav.main.w-max
    .menu
        ul.f-row.w-max
            li.f-row.start
                router-link(to="/")
                    img(src="../../star.svg")
                router-link(to="/")
                    h1.t-serif.t-up craft in america
            li.f-grow
            li(v-for="item in menuItems")
                router-link(v-if="['events','exhibitions'].includes(item)" :to="`/${item}/by-current-and-upcoming`")
                    h5.t-up {{ item }}
                router-link(v-else :to="`/${item}`")
                    h5.t-up {{ item }}

    .mobile-menu
        .f-row.start
            router-link(to="/")
                img(src="../../star.svg")
            router-link(to="/")
                h1.t-serif.t-up craft in america
        
        label(for="toggle-mobile-menu" aria-label="Menu").drop-down &#9776;
        input(id="toggle-mobile-menu" type="checkbox").hide

        ul.drop-down.w-max
            li(v-for="item in menuItems")
                router-link(@click="uncheck" :to="`/${item}`")
                    h5.t-up {{ item }}
</template>

<script>
import { postTypes } from '@/utils/helpers'
import { computed } from '@vue/runtime-core'

export default {
    setup() {
        /**
         * Navigation items
         * Auto-includes declared postTypes
         * and extra items
         * TIP: Add things to the ignored array
         * to remove from the nav
         */
        const menuItems = computed(() => {
            const extras = [
                // 'center',
                // 'education',
                // 'resources',
                // 'support',
                // 'about',
                // '🔍'
            ]
            const ignored = [
                'pages',
                'sticky',
                // 'posts',
            ]
            const filtered = postTypes.filter(val => !ignored.includes(val))
            return [...filtered, ...extras]
        })

        const uncheck = () => {
            document.getElementById('toggle-mobile-menu').checked = false
        }
        
        return {
            menuItems,
            uncheck
        }
    },
}
</script>

<style lang="postcss">
// prettier-ignore
@import '../../sss/variables.sss'
@import '../../sss/theme.sss'

nav.main
    position: sticky
    top: 0
    /* background-color: lightblue */
    background-color: $cia_grey
    word-wrap: break-word
    z-index: 10002
    .menu, .mobile-menu
        /* padding: $ms-0 0 */
        a
            color: $cia_black
            &:hover
                color: $cia_darker
            h1
                font-size: $ms-2
                font-weight: 400
                color: $cia_red
                text-decoration: none
            img
                width: $ms-3
                height: $ms-3
                padding: 0
    
    .menu   
        display: none
        h1
            margin: 0
        h5  
            font-size: $ms--1
            font-weight: 400
            margin: 0
        img
            margin: 0 0 calc(-1 * $ms--5) 0
        > ul
            padding: 0 0 0 $ms-0
            > li:nth-child(1)
                a
                    text-decoration: none
            > li:nth-child(n+2)
                a > h5
                    padding: $ms-1
                    
    
    .mobile-menu
        a
            text-decoration: none
        /* cia logotype adjust for smaller screens */
        img 
            margin: $ms--7 $ms--6 0 $ms-0
        h1
            padding: $ms--4 0
            margin: 0 0 0 calc(-1 * $ms--7)
        /* hamburger menu drawer */
        label
            position: absolute
            right: 0
            top: 0
            padding: $ms-0
            &:hover
                color: $primary-dark
                cursor: pointer
        /* make this menu style for $small min-width 480px screen */
        input
            &.hide
                display: none
                cursor: pointer
                &:checked + ul
                    display: block 
                    position: absolute
                    width: 100%
        ul
            /* background-color: $primary-dark */
            background-color: $cia_grey
            display: none
            margin: 1px 0 0 0
            box-shadow: lightgrey $ms--7 $ms--7 $ms--7
            li  
                /* color: $primary-light */
                &:hover
                    color: $primary-dark
                    background-color: $primary-light
                    transition: $transition
                h5
                    /* font-size: $ms-0 */
                    /* color: $cia_black */
                    padding: $ms--1
                    /* padding: 0 */
                    margin: 0

    @media (min-width: $large)
        .menu
            display: flex
            justify-content: center
        .mobile-menu
            display: none

    @media (min-width:  $extra-large)
        .menu > ul
            max-width: $max-width
</style>