site navigation api calls

TODO.md

@@ -15,3 +15,6 @@
 * refreshing page on gallery and then quickly usingh history buttons breaks it
 * broken layout at exactly 40em (640px) breakpoint
 * galleries page - 'Added non-passive event listener to a scroll-blocking ... event'
+* galleries - click on thumb, click on different gallery, click on original gallery
+              and the thumb list doesn't scroll to correct position to show thumb 0,
+              it is still showing the thumb that was clicked on first

components/SiteMenu.vue

@@ -97,7 +97,7 @@ export default {
   },
 
   created () {
-    this.$store.dispatch('navigation/load')
+    // this.$store.dispatch('navigation/load')
   },
 
   mounted () {

pages/galleries.vue

@@ -31,7 +31,6 @@ export default {
   },
 
   async asyncData ({ $axios }) {
-    // TOOD catch errors
     let { galleries } = await $axios.$get('/api/v1/galleries')
     return { galleries }
   },

store/index.js

@@ -1,2 +1,11 @@
 export const state = () => ({})
 
+export const actions = {
+  async nuxtServerInit ({ commit }, { $axios }) {
+    const { siteNav, socialNav } = await $axios.$get('/api/v1/navigation')
+
+    commit('navigation/updateSiteNav', siteNav)
+    commit('navigation/updateSocialNav', socialNav)
+  }
+}
+

store/navigation.js

@@ -1,35 +1,20 @@
-const  SITE_NAV = [
-    { 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
-    { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' },
-    { 'to': '/services', 'text': 'Services', bgImgUrl: '/img/camera--bw.jpg' },
-    { 'to': '/about', 'text': 'About Me', bgImgUrl: '/img/silhouette--dark.jpg' },
-    { 'to': '/contact', 'text': 'Contact Me', bgImgUrl: '/img/mail--bw.jpg' },
-  ]
-
-const SOCIAL_NAV = [
-    { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' },
-    { 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: 'facebook' },
-    { 'to': 'https://twitter.com', 'text': 'Twitter', icon: 'twitter' },
-    { 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: 'linkedin' },
-  ]
-
 export const state = () => ({
   siteNav: [],
   socialNav: [],
 })
 
-export const actions = {
+// export const actions = {
-  load ({ commit }) {
+//   load ({ commit }) {
-    return new Promise(resolve => {
+//     return new Promise(resolve => {
-      setTimeout(() => {
+//       setTimeout(() => {
-        commit('updateSiteNav', SITE_NAV)
+//         commit('updateSiteNav', SITE_NAV)
-        commit('updateSocialNav', SOCIAL_NAV)
+//         commit('updateSocialNav', SOCIAL_NAV)
-        resolve()
+//         resolve()
-      }, 300)
+//       }, 300)
-    })
+//     })
-  }
+//   }
-}
+// }
-
+//
 export const getters = {
   siteNav: state => {
     return state.siteNav