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

// Replace with calls to menu system
<template lang="pug">
nav.main.w-max
    .menu.f-col
        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="['event','exhibition'].includes(item)" :to="`/${item}/sorted/${sortTypes.currentAndUpcoming}`")
            //-         h5.t-up {{ item }}
            //-     router-link(v-else-if="['artist'].includes(item)" :to="`/${item}/sorted/${sortTypes.alpha}`")
            //-         h5.t-up {{ item }}
            //-     router-link(v-else :to="`/${item}`")
            //-         h5.t-up {{ item }}

            //- hardcoded menu
            li.f-grow
            li.t-up PBS Series 
                ul.submenu 
                    li
                        router-link(to="/episode") Episodes
                    li
                        router-link(to="/short") Shorts
                    li
                        router-link(to="/technique") Techniques
            li.f-grow
            li.t-up Artists
                ul.submenu
                    li
                        router-link(to="/artist/sorted/by-alpha") A - Z
                    li
                        router-link(to="/artist/sorted/by-material") By Material
            li.f-grow
            li.t-up Exhibitions
                ul.submenu 
                    li
                        router-link(to="/exhibition/sorted/by-current-and-upcoming") Current/Upcoming
                    li
                        router-link(to="/exhibition/sorted/by-date") Past
                    li
                        router-link(to="/object") Explore Craft Objects
            li.f-grow
            li.t-up Center 
                ul.submenu 
                    li
                        router-link(to="/page/center") Info
                    li
                        router-link(to="/event/sorted/by-current-and-upcoming") Events Current/Upcoming
                    li
                        router-link(to="/event/sorted/by-type") Talks & Interviews
                    li
                        router-link(to="/page/library") Library
            li.f-grow
            li.t-up Education  
                ul.submenu 
                    li
                        router-link(to="/guide") Education Guides
                    li
                        router-link(to="/page/video-resources-for-educators") Video Resources 
                    li
                        router-link(to="/page/craft-in-schools") Craft in Schools  
                    li
                        router-link(to="/page/craft-resources-map") Craft Resource Map 
                    li
                        router-link(to="/publication") Publications 
                    li
                        router-link(to="/page/library") Library
                    
            li.f-grow
            li.t-up Resources   
                ul.submenu 
                    li
                        router-link(to="/page/artists-resources") Opportunities
                    li
                        router-link(to="/artist/sorted/by-type") Organizations and Institutions 
                    li
                        router-link(to="/page/craft-resources-map") Craft Resources Map 
                    li
                        router-link(to="/page/community-craft-calendar") Community Craft Calendar 
            li.f-grow
            li.t-up Support   
                ul.submenu 
                    li
                        router-link(to="/page/donate") Donate
                    li
                        router-link(to="/page/shop") Shop 
            li.f-grow
            li.t-up About    
                ul.submenu 
                    li
                        router-link(to="/page/about") Craft in America 
                    li
                        router-link(to="/page/mission") Mission 
                    li
                        router-link(to="/page/staff") Staff 
                    li
                        router-link(to="/page/board") Board of Directors 
                    li
                        router-link(to="/page/contact") Contact 
            li.f-grow
            li.t-up 
                a(@click="toggleSearch") search
        ul(v-if="isSearchOpen").search.w-max
            li.f-row.w-max
                input(v-model="searchTerms" @keyup.enter="sendSearch" tabindex="10")
                button.b-none.bg-none(@click="sendSearch" tabindex="11") 🔍

    .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 { computed, ref, nextTick } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
import { postTypes, sortTypes } from '@/utils/helpers'

export default {
    setup() {
        const router = useRouter()
        const searchTerms = ref('')
        const isSearchOpen = ref(false)
        const toggleSearch = () => {
            isSearchOpen.value = !isSearchOpen.value
            if(isSearchOpen.value) {
                nextTick(() => {
                    const searchBox = document.querySelector('ul.search > li > input')
                    searchBox.focus()
                })
            }
        }
        const sendSearch = () => {
            router.push({ path: '/search', query: { s: searchTerms.value } })
            searchTerms.value = ''
            toggleSearch()
        }
        

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

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

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

nav.main
    position: sticky
    top: 0
    background-color: $cia_grey
    word-wrap: break-word
    z-index: 10002
    .menu, .mobile-menu, .submenu
        a
            text-decoration: none
            color: $cia_black
            &:hover
                color: $cia_darker
            h1
                font-size: $ms-3
                font-weight: 400
                color: $cia_red
                text-decoration: none
            img
                width: $ms-3
                height: $ms-3
                padding: 0
    
    .menu > ul
        position: relative
        padding: 0 0 0 $ms-0
        &.search
            background-color: #fefefe
            box-shadow: 1px 1px 1px $lighter
            position: absolute
            top: 36px
            padding: 0
            input
                width: 50%
                font-size: $ms-2

    .menu   
        h1
            margin: $ms--7 0 0
        h5  
            font-size: $ms--1
            font-weight: 400
            margin: 0
        img
            margin: 0 $ms--2 calc(-1 * $ms--6) 0
        > ul > li
            &:nth-child(1)
                a
                    text-decoration: none
            &:nth-child(n+2)
                a > h5
                    padding: $ms-1
                //- menu hover
                &:hover
                    color: $cia_red1
                    display: block 
                    cursor: pointer
                    transition: $transition
            ul.submenu
                display: block  
                position: absolute
                background-color: $lighter
                padding: 0 0.5em 0.5em
                opacity: 0

                //- submenu hover
                &:hover 
                    display: block  
                    background-color: $lighter
                    opacity: 1
                    transition: $transition

                > li 
                    line-height: 1.5
                    width: max-content
                    background-color: $lighter
                    //- list hover
                    &:hover 
                        display: block  
                        background-color: $lighter
                    
    
    .mobile-menu
        a
        /* cia logotype for smaller screens */
        img 
            margin: $ms--7 $ms--6 0 $ms-0
        h1
            padding: $ms--4 0 0
            margin: 0 0 $ms--7 $ms--7

        /* hamburger menu drawer */
        label
            position: absolute
            right: 0
            top: 0
            padding: $ms--4 $ms--2
            font-size: $ms-2
            &:hover
                color: $cia_darker
                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: $cia_red
            display: none
            margin: 0.5px 0 0 0
            box-shadow: lightgrey $ms--7 $ms--7 $ms--7
            li  
                /* color: $primary-light */
                &:hover
                    /* color: $cia_red2 */
                    background-color: $cia_red1
                    transition: $transition
                h5
                    /* font-size: $ms-0 */
                    color: $cia_white
                    padding: $ms--1
                    /* padding: 0 */
                    margin: 0

    @media (max-width: $large)
        .menu
            display: none

    @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>