navigation items moved to store

TODO.md

@@ -1,12 +1,10 @@
-## General
+## TODO
 * image urls, page links, social nav items, etc -> put in store or whatever
-* facebook/twitter social card thingies
+* 404 page
 * favicon
 * page descriptions etc
-* 404 page
-
-## Services
-* background image for mobile
+* services - background image for mobile
+* facebook/twitter social card thingies
 
 ## Maybes
 * gallery page - featured images in same style as on services page with the

components/SiteMenu.vue

@@ -83,22 +83,26 @@ export default {
     return {
       isMounted: false, //component has loaded
       loadMenuImages: true,
-      siteNav: [
-        { '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' },
-      ],
-      socialNav: [
-        { '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' },
-      ]
     }
   },
 
+  computed: {
+    siteNav () {
+      return this.$store.getters['navigation/siteNav']
+    },
+
+    socialNav () {
+      return this.$store.getters['navigation/socialNav']
+    },
+  },
+
+  created () {
+    this.$store.dispatch('navigation/load')
+      .then(() => {
+        console.log('navigation/load complete')
+      })
+  },
+
   mounted () {
     const mq = window.matchMedia("(min-width: 40em)")
     this.loadMenuImages = mq.matches
@@ -160,6 +164,9 @@ $transition-timing: .5s;
 
   width: 100%;
   height: 100%;
+
+  overflow-y: auto;
+
   background-color: $site-menu__color-bg; 
   background: linear-gradient(
     to right,

layouts/error.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="error-page">
+    <h1 v-if="error.statusCode === 404">Page not found</h1>
+    <h1 v-else>An error occurred</h1>
+    <nuxt-link to="/">Home</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  padding: 6rem 1rem;
+}
+</style>
+

store/index.js

@@ -0,0 +1,2 @@
+export const state = () => ({})
+