hardcode nav menu - needs better implementation

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

@@ -8,14 +8,99 @@ nav.main.w-max
                     img(src="../../star.svg")
                 router-link(to="/")
                     h1.t-serif.t-up 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}`")
+            //-         h5.t-up {{ item }}
+            //-     router-link(v-else-if="['artist'].includes(item)" :to="`/${item}/sorted/${sortTypes.alpha}`")
+            //-         h5.t-up {{ item }}
+            //-     router-link(v-else :to="`/${item}`")
+            //-         h5.t-up {{ item }}
+
+            //- hardcoded menu
             li.f-grow
-            li(v-for="item in menuItems")
-                router-link(v-if="['event','exhibition'].includes(item)" :to="`/${item}/sorted/${sortTypes.currentAndUpcoming}`")
-                    h5.t-up {{ item }}
-                router-link(v-else-if="['artist'].includes(item)" :to="`/${item}/sorted/${sortTypes.alpha}`")
-                    h5.t-up {{ item }}
-                router-link(v-else :to="`/${item}`")
-                    h5.t-up {{ item }}
+            li.t-up 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
+            li.t-up 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 Exhibitions
+                ul.submenu 
+                    li
+                        router-link(to="/exhibition/sorted/by-current-and-upcoming") Current/Upcoming
+                    li
+                        router-link(to="/exhibition/sorted/by-date") Past
+                    li
+                        router-link(to="/object") Explore Craft Objects
+            li.f-grow
+            li.t-up Center 
+                ul.submenu 
+                    li
+                        router-link(to="/page/center") Info
+                    li
+                        router-link(to="/event/sorted/by-current-and-upcoming") Events Current/Upcoming
+                    li
+                        router-link(to="/event/talks-and-interviews") Talks & Interviews
+                    li
+                        router-link(to="/page/library") Library
+            li.f-grow
+            li.t-up Education  
+                ul.submenu 
+                    li
+                        router-link(to="/guide") Education Guides
+                    li
+                        router-link(to="/page/video-resources") Video Resources 
+                    li
+                        router-link(to="/page/craft-resource-map") Craft Resource Map 
+                    li
+                        router-link(to="/publication") Publications
+            li.f-grow
+            li.t-up Resources   
+                ul.submenu 
+                    li
+                        router-link(to="/page/opportunities") Opportunities
+                    li
+                        router-link(to="/page/organization-and-institutions") Organizations and Institutions 
+                    li
+                        router-link(to="/page/craft-resource-map") Craft Resource Map 
+                    li
+                        router-link(to="/page/community-craft-calendar") Publications
+            li.f-grow
+            li.t-up Support   
+                ul.submenu 
+                    li
+                        router-link(to="/page/donate") Donate
+                    li
+                        router-link(to="/page/shop") Shop 
+            li.f-grow
+            li.t-up About    
+                ul.submenu 
+                    li
+                        router-link(to="/page/about") Craft in America 
+                    li
+                        router-link(to="/page/misssion") Mission 
+                    li
+                        router-link(to="/page/staff") Staff 
+                    li
+                        router-link(to="/page/board") Board of Directors 
+                    li
+                        router-link(to="/page/contact") Contact 
+            li.f-grow
+            li.t-up 🔍
+                ul.submenu 
+                    li
+                        router-link(to="/page/search") Search
 
     .mobile-menu
         .f-row.start
@@ -85,12 +170,10 @@ export default {
 nav.main
     position: sticky
     top: 0
-    /* background-color: lightblue */
     background-color: $cia_grey
     word-wrap: break-word
     z-index: 10002
-    .menu, .mobile-menu
-        /* padding: $ms-0 0 */
+    .menu, .mobile-menu, .submenu
         a
             text-decoration: none
             color: $cia_black
@@ -107,7 +190,6 @@ nav.main
                 padding: 0
     
     .menu   
-        display: none
         h1
             margin: $ms--7 0 0
         h5  
@@ -117,6 +199,7 @@ nav.main
         img
             margin: 0 $ms--2 calc(-1 * $ms--6) 0
         > ul
+            position: relative
             padding: 0 0 0 $ms-0
             > li:nth-child(1)
                 a
@@ -124,6 +207,35 @@ nav.main
             > li:nth-child(n+2)
                 a > h5
                     padding: $ms-1
+
+                //- menu hover
+                &:hover
+                    color: $cia_red1
+                    display: block 
+                    cursor: pointer
+                    transition: $transition
+            li 
+                ul.submenu
+                    display: block  
+                    position: absolute
+                    background-color: $lighter
+                    padding: 0 0.5em 0.5em
+                    opacity: 0
+                    //- submenu hover
+                    &:hover 
+                        display: block  
+                        background-color: $lighter
+                        opacity: 1
+                        transition: $transition
+
+                    li 
+                        line-height: 1.5
+                        width: max-content
+                        background-color: $lighter
+                        //- list hover
+                        &:hover 
+                            display: block  
+                            background-color: $lighter
                     
     
     .mobile-menu