:art: cleaning up responsive nav

vue-theme/src/components/footer.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.footer-wrapper.t-up.t-sans.b-radius
+.footer-wrapper.t-up.t-sans
     footer.main
         //- address contact
         ul.f-col.start
@@ -176,6 +176,4 @@
     .footer-wrapper footer.main 
         > ul
             background-color: teal
-
-
 </style>

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

@@ -1,47 +1,56 @@
 // 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
+    .mobile-menu
+        .f-row.start
+            router-link(to="/")
+                img(src="../../star.svg")
+            router-link(to="/")
+                h1.t-serif.t-up &nbsp;logotype
+        
+        label(for="toggle-mobile-menu" aria-label="Menu").drop-down &#9776;
+        input(id="toggle-mobile-menu" type="checkbox").hide
+
+        ul.drop-down
+            li(v-for="item in menuItems")
+                router-link(:to="`/${item}`")
+                    h5.t-up {{ item }}
+
+    .menu
+        ul.f-row
+            li.f-row.start
+                router-link(to="/")
+                    img(src="../../star.svg")
+                router-link(to="/")
+                    h1.t-serif.t-up &nbsp;logotype
+            li.f-grow
+            li(v-for="item in menuItems")
+                router-link(:to="`/${item}`")
+                    h5.t-up {{ item }}
 </template>
 
+<script>
+export default {
+    setup() {
+        const menuItems = [
+            'episodes',
+            'artists',
+            'exhibitions',
+            'events',
+            'center',
+            'education',
+            'news',
+            'support',
+            'search',
+        ]
+        return { 
+            menuItems
+        }
+    }
+}
+</script>
+
 <style lang="postcss">
 @import '../../sss/variables.sss'
 @import '../../sss/theme.sss'
@@ -52,33 +61,74 @@ nav.main
     background-color: lightblue
     word-wrap: break-word
     z-index: 10000
-    h1
-        font-size: 1.5em
-        color: $cia_red
-    a > h1
+    
+    h5
         margin: 0
+    
+    .menu, .mobile-menu
+        padding: $ms-0 0
+        a
+            margin: 0
+            h1
+                font-size: $ms-1
+                color: $cia_red
+                margin: 0
+            img
+                width: $ms-3
+                height: $ms-3
+                padding: 0
+    
+    .menu
+        display: none
+        > ul
+            width: 100%
+            li
+                padding: 0 $ms--1
+    
+    .mobile-menu
         img
-            width: 25px
-            height: 25px
-            padding: 0
-    label
-        position: absolute
-        right: 3vw
-        top: 10px
-    input
-        &.hide
+            margin: 0 $ms--5 0 $ms-0
+        label
+            position: absolute
+            right: 0
+            top: 0
+            padding: $ms-1
+            &:hover
+                color: $cia_grey
+                cursor: pointer
+                transition: $transition
+        input
+            &.hide
+                display: none
+                cursor: pointer
+                &:checked + ul
+                    display: block 
+                    clear: both 
+                    position: fixed
+        ul
+            width: 100%
+            background-color: $primary-dark
             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
+            padding: $ms--1 0
+            li  
+                color: $primary-light
+                padding: $ms--3 $ms--1
+                &:hover
+                    color: $primary-dark
+                    background-color: $primary-light
+                h5
+                    font-size: $ms-1
+                    color: $cia_black
+
+
+@media (--medium-viewport)
+    nav.main 
+        .menu
+            display: flex
+            justify-content: center
+        .mobile-menu
+            display: none
+@media (--extra-large-viewport)
+    nav.main .menu > ul
+        max-width: $max-width
 </style>