From 611accfb5f4ff9823d3640a2ab9fe75a60ca047d Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Sat, 2 Feb 2019 17:11:42 +0000
Subject: [PATCH] error page styling

---
 TODO.md           |  1 -
 layouts/error.vue | 46 ++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/TODO.md b/TODO.md
index 0add77d..a4f5b7b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,6 +1,5 @@
 ## TODO
 * image urls, page links, social nav items, etc -> put in store or whatever
-* 404 page
 * favicon
 * page descriptions etc
 * services - background image for mobile
diff --git a/layouts/error.vue b/layouts/error.vue
index 846deea..a5e8738 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,8 +1,20 @@
 <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>
+    <h1 class="heading" v-if="error.statusCode === 404">Page not found</h1>
+    <h1 class="heading" v-else>An error occurred</h1>
+    <nav>
+      <ul class="site-nav">
+        <li class="site-nav__item"
+            v-for="item in siteNav"
+            :key="item.to"
+            @click="$emit('closeMenu')"
+        >
+          <nuxt-link :to="item.to" >
+            {{ item.text }}
+          </nuxt-link>
+        </li>
+      </ul>
+    </nav>
   </div>
 </template>
 
@@ -16,6 +28,12 @@ export default {
       },
     }
   },
+
+  computed: {
+    siteNav () {
+      return this.$store.getters['navigation/siteNav']
+    },
+  },
 }
 </script>
 
@@ -28,7 +46,27 @@ export default {
   justify-content: flex-start;
   align-items: center;
 
-  padding: 6rem 1rem;
+  padding: calc(1rem + #{$site-menu__header-height}) 1rem;
+  text-align: center;
+
+  @media (min-width: $bp__layout) {
+    padding: 6rem 1rem;
+  }
 }
+
+.heading {
+  margin-bottom: 1em;
+  font-size: 2rem;
+  color: $color__accent-danger-700;
+}
+
+.site-nav {
+  font-size: 1.3rem;
+  padding: 0;
+}
+
+  .site-nav__item {
+    margin-bottom: .2em;
+  }
 </style>