Using the store to handle navigation with siblings, add styles, icons and font

Author: Alexander Classen

assets/css/styles.css

@@ -0,0 +1,36 @@
+@layer base {
+  @font-face {
+    font-family: ITC Avant Garde Gothic;
+    font-weight: 400;
+    src: url(/fonts/itc-avant-garde-gothic-medium.otf) format('woff');
+  }
+  @font-face {
+    font-family: ITC Avant Garde Gothic;
+    font-weight: 600;
+    src: url(/fonts/itc-avant-garde-gothic-std-bold.otf) format('woff');
+  }
+}
+
+@layer base {
+  * {
+    @apply text-white;
+    font-size: 20px;
+  }
+  h1 {
+    @apply font-bold;
+    @apply text-6xl;
+  }
+  h2 {
+    @apply font-bold;
+    @apply text-6xl;
+  }
+  h3 {
+    @apply font-bold;
+    @apply text-5xl;
+  }
+
+  ul li {
+    @apply list-outside;
+    @apply list-disc;
+  }
+}

assets/icons/arrow.svg

@@ -1,6 +1,14 @@
 <template>
-  <div class="arrow" @click="$emit(`slide-${direction}`)">
-    <span class="icon text-6xl cursor-pointer">{{ icon }}</span>
+  <div
+    class="arrow cursor-pointer w-8 h-8"
+    @click="$emit(`slide-${direction}`)"
+  >
+    <img
+      class="icon"
+      :class="direction"
+      src="@/assets/icons/arrow.svg"
+      alt="Logo"
+    />
   </div>
 </template>
 
@@ -22,3 +30,8 @@ export default {
   },
 }
 </script>
+<style scoped>
+.icon.right {
+  transform: rotate(180deg);
+}
+</style>

assets/icons/westwerk-bildmarke.svg

@@ -0,0 +1,23 @@
+<template>
+  <div class="progress-bar fixed top-0 w-full">
+    <div class="bar h-1 bg-green" :style="styleObj"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    width() {
+      return (100 / this.$store.state.slides.length) * this.$route.params.slide
+    },
+    styleObj() {
+      return { width: this.width + '%' }
+    },
+  },
+}
+</script>
+<style scoped>
+.progress-bar .bar {
+  transition: width 300ms ease-in-out;
+}
+</style>

components/arrow.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="slide-navigation">
     <div class="arrwos flex">
-      <nuxt-link v-if="navigationItems[0]" :to="navigationItems[0].slug">
+      <nuxt-link
+        v-if="navigationItems[0]"
+        :to="`${navigationItems[0]}`"
+        class="mx-2"
+      >
         <arrow :direction="'left'" @slide-left="$emit('slide-left')" />
       </nuxt-link>
-      <nuxt-link v-if="navigationItems[1]" :to="navigationItems[1].slug">
+      <nuxt-link v-if="navigationItems[1]" :to="`${navigationItems[1]}`">
         <arrow :direction="'right'" @slide-right="$emit('slide-right')" />
       </nuxt-link>
     </div>
@@ -16,7 +20,7 @@ export default {
   props: {
     navigationItems: {
       default() {
-        return [{}, {}]
+        return []
       },
       validator(value) {
         return value.length === 2

components/progress-bar.vue

@@ -2,6 +2,7 @@
 title: Welcome to my Presentation
 ---
 
-Hello all! This is my presentation about NUXTJS.
+Hello all! This is my presentation about Nuxt.js.
 
 # Hello audience!
+## Audience: Hello Back!

components/slide-navigation.vue

@@ -1,9 +1,80 @@
 <template>
-  <main>
+  <main class="bg-black">
+    <progress-bar />
     <div
       class="container mx-auto flex justify-center items-center min-h-screen"
     >
       <nuxt />
     </div>
+    <slide-navigation
+      v-if="siblings.length"
+      class="fixed bottom-0 right-0 mr-3"
+      :navigation-items="[prev, next]"
+      @slide-left="slideLeft"
+      @slide-right="slideRight"
+    />
+    <img
+      class="fixed logo bottom-0"
+      src="@/assets/icons/westwerk-bildmarke.svg"
+      alt="Logo"
+    />
   </main>
 </template>
+<script>
+export default {
+  computed: {
+    siblings() {
+      return this.$store.state.siblings
+    },
+    slides() {
+      return this.$store.state.slides
+    },
+
+    next() {
+      return (
+        this.slides.findIndex((item) => item.slug === this.siblings[1]?.slug) +
+        1
+      )
+    },
+    prev() {
+      return (
+        this.slides.findIndex((item) => item.slug === this.siblings[0]?.slug) +
+        1
+      )
+    },
+  },
+  mounted() {
+    window.addEventListener('keyup', this.keyup)
+  },
+  beforeDestroy() {
+    window.removeEventListener('keyup', this.keyup)
+  },
+  methods: {
+    keyup({ key }) {
+      if (key === 'ArrowLeft') this.slideLeft()
+      if (key === 'ArrowRight') this.slideRight()
+      if (key === 'ArrowRown') this.slideDown()
+      if (key === 'ArrowUP') this.slideUp()
+    },
+    slideRight() {
+      if (this.siblings[1]) {
+        this.$router.push({
+          params: { slide: this.next },
+        })
+      }
+    },
+    slideLeft() {
+      if (this.siblings[0]) {
+        this.$router.push({
+          params: { slide: this.prev },
+        })
+      }
+    },
+  },
+}
+</script>
+<style>
+.logo {
+  transform: translate(-25%, 40%);
+}
+</style>

content/slides/slide-1.md

@@ -18,7 +18,7 @@ export default {
   },
 
   // Global CSS (https://go.nuxtjs.dev/config-css)
-  css: [],
+  css: ['@/assets/css/styles.css'],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: [],

layouts/default.vue

@@ -17,7 +17,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "npm run lint"
     }
   },
   "dependencies": {