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.t-up 
        ul.f-row.w-max
            li.f-row.start
                router-link(to="/")
                    img(aria-label="home button logo" src="../../star.svg")
                router-link(to="/")
                    h1.t-serif craft in america

            //- hardcoded menu
            li.f-grow
            li.f-grow
                router-link(to="/episode") 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
                router-link(to="/artist") 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 
                router-link(to="/exhibition") Exhibitions
                ul.submenu 
                    li
                        router-link(to="/exhibition/sorted/by-current-and-upcoming") Current/Upcoming
                    li
                        router-link(to="/exhibition/sorted/by-past") Past
            li.f-grow  
                router-link(to="/page/center") Center
                ul.submenu
                    li
                        router-link(to="/page/center") Info
                    li
                        router-link(to="/event/sorted/by-current-and-upcoming") Events
                    li
                        router-link(to="/page/recorded-talks-and-interviews") Recorded Talks + Interviews
                    li
                        router-link(to="/page/library") Library
            li.f-grow   
                router-link(to="/guide") 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.f-grow    
                router-link(to="/page/artists-resources") Resources
                ul.submenu 
                    li 
                        a(href="https://www.craftvideodictionary.org" target="_blank") Craft Video Dictionary Website
                    li
                        router-link(to="/publication") Publications 
                    li
                        router-link(to="/object") Explore Craft Objects
                    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    
                router-link(to="/page/donate") Support
                ul.submenu 
                    li
                        router-link(to="/page/donate") Donate
                    li
                        router-link(to="/page/shop") Shop 
            li.f-grow 
                router-link(to="/page/about") About 
                ul.submenu 
                    li
                        router-link(to="/page/about") Craft in America 
                    li
                        router-link(to="/page/board") Board of Directors 
                    li
                        router-link(to="/page/staff") Staff 
                    li
                        router-link(to="/page/contact") Contact 
            li.f-grow 
                a(@click="toggleSearch") 🔍
        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") 🔍 search

    .mobile-menu
        .f-row.start
            router-link(to="/")
                img(aria-label="home button logo" 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.t-up
            li.f-col.center
                h5
                    .search-item
                        input(v-model="searchTerms" @keyup.enter="sendSearch" tabindex="10")
                        button(@click="sendSearch" tabindex="11") &nbsp;🔍 search&nbsp;
            li(v-for="item in menuItems").f-row.center
                router-link(@click="uncheck" v-if="item == 'about' || item == 'donate' || item == 'center' || item == 'library'" :to="`/page/${item}`")
                    h5 {{ item }}
                router-link(@click="uncheck" v-else= "" :to="`/${item}`")
                    h5 {{ 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()
            document.getElementById('toggle-mobile-menu').checked = false
        }

        /**
         * 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 = [
                'center',
                'library',
                'blog',
                'donate',
                '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
                height: $ms-4
                vertical-align: middle
                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 

                ul.submenu
                    display: none  
                    position: absolute
                    /* background-image: linear-gradient(180deg, rgba(255,255,255, 0), $lighter, $lighter, $lighter, $lighter, $lighter, $lighter, $lighter, $lighter) */
                    background-color: $lighter
                    padding: 0.3em 0.3em 0.3em
                    opacity: 0
                    top: 24px

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

                    > li 
                        line-height: 1.4
                        /* 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, button
            height: $ms-6
            vertical-align: middle
            &.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>