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

// Replace with calls to menu system
<template lang="pug">
nav.main
    router-link(to="/")
        h1.t-serif.t-up
            img(src="../../star.svg")
            span &nbsp;logotype
    
    label(for="toggle-mobile-menu" aria-label="Menu") &#9776;
    input(id="toggle-mobile-menu" type="checkbox").hide

    ul
        li
            router-link(:to="`/`")
                h5 home
        li
            router-link(:to="`/episodes`")
                h5 pbs series
        li
            router-link(:to="`/artists`")
                h5 artists
        li
            router-link(:to="`/exhibitions`")
                h5 exhibitions
        li
            router-link(:to="`/events`")
                h5 events
        li
            router-link(:to="`/center`")
                h5 center
        li
            router-link(:to="`/education`")
                h5 education
        li
            router-link(:to="`/posts`")
                h5 news
        li
            router-link(:to="`/support`")
                h5 support
        li
            router-link(:to="`/search`")
                h5 search
</template>

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

nav.main
    position: sticky
    top: 0
    background-color: lightblue
    word-wrap: break-word
    z-index: 10000
    h1
        font-size: 1.5em
        color: $cia_red
    a > h1
        margin: 0
        img
            width: 25px
            height: 25px
            padding: 0
    label
        position: absolute
        right: 3vw
        top: 10px
    input
        &.hide
            display: none
            cursor: pointer
            &:checked + ul
                display: block 
                clear: both 
                position: fixed
    ul
        width: 100%
        background-color: rgba(0,255,255,0.5)
        display: none
        li
            h5
                font-size: 1.0em
                color: $cia_black
</style>