update and reorder menu items

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

 // Replace with calls to menu system
 <template lang="pug">
 nav.main.w-max
-    .menu.f-col
+    .menu.f-col.t-up 
         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
+                    h1.t-serif 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}`")
 
             //- hardcoded menu
             li.f-grow
-            li.t-up
+            li.f-grow
                 router-link(to="/episode") PBS Series
                 ul.submenu 
                     li
                     li
                         router-link(to="/technique") Techniques
             li.f-grow
-            li.t-up
                 router-link(to="/artist/sorted/by-material") 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 
+            li.f-grow 
                 router-link(to="/exhibition/sorted/by-current-and-upcoming") 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
-                        router-link(to="/object") Explore Craft Objects
-            li.f-grow
-            li.t-up  
+            li.f-grow  
                 router-link(to="/page/center") Center
-                ul.submenu 
+                ul.submenu
                     li
                         router-link(to="/page/center") Info
                     li
-                        router-link(to="/event/sorted/by-current-and-upcoming") Events Current/Upcoming
+                        router-link(to="/event/sorted/by-current-and-upcoming") Events
                     li
-                        router-link(to="/event?type=talks") Talks & Interviews
+                        router-link(to="/page/recorded-talks-and-interviews") Recorded Talks + Interviews
                     li
                         router-link(to="/page/library") Library
-            li.f-grow
-            li.t-up   
+            li.f-grow   
                 router-link(to="/guide") Education
                 ul.submenu 
                     li
                     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 
+                        router-link(to="/page/craft-in-schools") Craft in Schools 
+            li.f-grow    
+                router-link(to="/page/artists-resources") Resources
+                ul.submenu 
                     li
                         router-link(to="/publication") Publications 
                     li
-                        router-link(to="/page/library") Library
-                    
-            li.f-grow
-            li.t-up    
-                router-link(to="/page/artists-resources") Resources
-                ul.submenu 
+                        router-link(to="/object") Explore Craft Objects
                     li
                         router-link(to="/page/artists-resources") Opportunities
                     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    
+            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
-            li.t-up    
+            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/mission") Mission 
                     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
-            li.t-up 
-                a(@click="toggleSearch") 🔍 
+            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")
         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" v-if="item == 'about'" :to="`/page/${item}`")
-                    h5.t-up {{ item }}
+        ul.drop-down.w-max.t-up
+            li(v-for="item in menuItems").f-row.center
+                router-link(@click="uncheck" v-if="item == 'about' || item == 'donate'" :to="`/page/${item}`")
+                    h5 {{ item }}
                 router-link(@click="uncheck" v-else= "" :to="`/${item}`")
-                    h5.t-up {{ item }}
+                    h5 {{ item }}
+            li.f-col.center
+                h5
+                    input(v-model="searchTerms" @keyup.enter="sendSearch" tabindex="10")
+                    button(@click="sendSearch" tabindex="11") 🔍 search
+
 </template>
 
 <script>
             router.push({ path: '/search', query: { s: searchTerms.value } })
             searchTerms.value = ''
             toggleSearch()
+            document.getElementById('toggle-mobile-menu').checked = false
         }
 
         /**
             const extras = [
                 'blog',
                 // 'artist-resources',
+                'donate',
                 'about',
-                '🔍'
             ]
             const ignore = [
                 'page',
 @import '../../sss/variables.sss'
 @import '../../sss/theme.sss'
 
-nav.main
+nav.main 
     position: sticky
     top: 0
     background-color: $cia_grey
                 width: $ms-3
                 height: $ms-3
                 padding: 0
-    
+
     .menu > ul
         position: relative
         padding: 0 0 0 $ms-0
         &.search
-            background-color: #fefefe
+            background-color: #fefefe 
             box-shadow: 1px 1px 1px $lighter
             position: absolute
             top: 36px
                     display: block 
                     cursor: pointer
                     transition: $transition
-            ul.submenu
-                display: block  
-                position: absolute
-                background-color: $lighter
-                padding: 0 0.5em 0.5em
-                opacity: 0
-                top: 23px
+                    ul.submenu
+                        display: block 
 
-                //- submenu hover
-                &:hover 
-                    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
-                    opacity: 1
-                    transition: $transition
+                    padding: 0.3em 0.3em 0.3em
+                    opacity: 0
+                    top: 24px
 
-                > li 
-                    line-height: 1.4
-                    width: max-content
-                    background-color: $lighter
-                    //- list hover
+                    //- submenu hover
                     &:hover 
                         display: block  
-                        background-color: $lighter
+                        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
         .menu > ul
             max-width: $max-width
 
-    
 </style>