:art: styling tweaks for footer and nav | auto-gen the navigation items

vue-theme/src/components/footer.vue

@@ -142,46 +142,40 @@
             font-size: 0.8em
             color: $cia_grey
 
-@media (--medium-viewport)
-    .footer-wrapper footer.main > ul
-        background-color: darkgreen
-        &:nth-child(n+2)
-            align-items: flex-start
-            flex-direction: row
-            flex-wrap: wrap
-            > li
-                width: 50%
+    @media (--medium-viewport)
+        footer.main > ul
+            background-color: darkgreen
+            &:nth-child(n+2)
+                align-items: flex-start
+                flex-direction: row
+                flex-wrap: wrap
+                > li
+                    width: 50%
 
-@media (--large-viewport)
-    .footer-wrapper footer.main > ul
-        background-color: purple
-        &:nth-child(n+2)
-            align-items: flex-start
-            flex-direction: row
-            flex-wrap: wrap
-            > li
-                width: 33%
+    @media (--large-viewport)
+        footer.main > ul
+            background-color: purple
+            &:nth-child(n+2)
+                > li
+                    width: 33%
 
-@media (--extra-large-viewport)
-    .footer-wrapper footer.main > ul
-        background-color: rebeccapurple
-        &:nth-child(n+2)
-            align-items: flex-start
-            flex-direction: row
-            flex-wrap: wrap
-            margin: 0 0 $ms-2 0
-            > li
-                width: 25%
+    @media (--extra-large-viewport)
+        footer.main > ul
+            background-color: rebeccapurple
+            &:nth-child(n+2)
+                margin: 0 0 $ms-2 0
+                > li
+                    width: 25%
 
-@media (--huge-viewport)
-    .footer-wrapper footer.main 
-        max-width: $max-width
-        margin: 0 auto
-        > ul
-            background-color: orange
+    @media (--huge-viewport)
+        footer.main 
+            max-width: $max-width
+            margin: 0 auto
+            > ul
+                background-color: orange
 
-@media (--ultra-viewport)
-    .footer-wrapper footer.main 
-        > ul
-            background-color: teal
+    @media (--ultra-viewport)
+        footer.main 
+            > ul
+                background-color: teal
 </style>

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

@@ -31,20 +31,33 @@ nav.main
 </template>
 
 <script>
+import { postTypes } from '@/utils/helpers'
+import { computed } from '@vue/runtime-core'
+
 export default {
     setup() {
-        const menuItems = [
-            'episodes',
-            'artists',
-            'exhibitions',
-            'events',
-            'center',
-            'education',
-            'posts',
-            'support',
-            'search',
-        ]
-        return { 
+        /**
+         * 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',
+                'support',
+                'search'
+            ]
+            const ignored = [
+                'pages',
+                // 'posts',
+            ]
+            const filtered = postTypes.filter(val => !ignored.includes(val))
+            return [ ...filtered, ...extras ]
+        })
+        return {
             menuItems
         }
     }
@@ -86,7 +99,7 @@ nav.main
                 padding: 0 $ms--1
     
     .mobile-menu
-        img
+        img 
             margin: 0 $ms--5 0 $ms-0
         label
             position: absolute
@@ -122,14 +135,14 @@ nav.main
                     padding: $ms--1
 
 
-@media (--medium-viewport)
-    nav.main 
+    @media (--medium-viewport)
         .menu
             display: flex
             justify-content: center
         .mobile-menu
             display: none
-@media (--extra-large-viewport)
-    nav.main .menu > ul
-        max-width: $max-width
+
+    @media (--extra-large-viewport)
+        .menu > ul
+            max-width: $max-width
 </style>

vue-theme/src/utils/helpers.js

@@ -24,12 +24,12 @@ const sortTypes = {
  * list and single components to request data
  */
  const postTypes = [
-    'posts',
-    'pages',
-    'artists',
     'episodes',
+    'artists',
+    'exhibitions',
     'events',
-    'exhibitions'
+    'posts',
+    'pages',
 ]
 
 export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes }