From 49e377f3621a8d7ab41e40ca07513eabd3e256d3 Mon Sep 17 00:00:00 2001
From: Niklas Wolf <wolfniklas94@web.de>
Date: Fri, 21 Jun 2024 11:51:02 +0200
Subject: [PATCH] feat: add navbar for different pages to playground

---
 playground/components/NavigationBar.vue | 15 +++++++++++++++
 playground/pages/index.vue              |  2 ++
 playground/pages/without.vue            |  3 +++
 3 files changed, 20 insertions(+)
 create mode 100644 playground/components/NavigationBar.vue

diff --git a/playground/components/NavigationBar.vue b/playground/components/NavigationBar.vue
new file mode 100644
index 0000000..15796a5
--- /dev/null
+++ b/playground/components/NavigationBar.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+
+<template>
+    <nav>
+        <NuxtLink to="/">Default</NuxtLink>
+        <NuxtLink to="/without">Lazy-loaded</NuxtLink>
+    </nav>
+</template>
+
+<style scoped>
+nav {
+    display: flex;
+    gap: 20px;
+}
+</style>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index ba7b68a..450e612 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import NavigationBar from '~/components/NavigationBar.vue'
 const CreditCardError = ref()
 const CreditCardToken = ref()
 
@@ -7,6 +8,7 @@ const IdealError = ref()
 </script>
 <template>
     <div>
+        <NavigationBar />
         <h1>Nuxt mollie payments components</h1>
 
         <h2>Credit Card</h2>
diff --git a/playground/pages/without.vue b/playground/pages/without.vue
index f31d4da..885086d 100644
--- a/playground/pages/without.vue
+++ b/playground/pages/without.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import NavigationBar from '~/components/NavigationBar.vue'
 const show = ref(false)
 const CreditCardError = ref()
 const CreditCardToken = ref()
@@ -7,6 +8,8 @@ const CreditCardToken = ref()
 
 <template>
     <div>
+        <NavigationBar />
+
         <h1>Load Mollie script lazily</h1>
         <div>On this page the scripts load lazily, if the button is clicked.</div>
         <div>To test this, the option <i>isIncludedGlobally: false</i> has to be set in nuxt config.</div>