feat: add navbar for different pages to playground

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>

playground/pages/index.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { ref } from 'vue'
+import NavigationBar from '~/components/NavigationBar.vue'
 const CreditCardError = ref()
 const CreditCardToken = ref()
 
 const IdealError = ref()
 </script>
 <template>
     <div>
+        <NavigationBar />
         <h1>Nuxt mollie payments components</h1>
 
         <h2>Credit Card</h2>

playground/pages/without.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import NavigationBar from '~/components/NavigationBar.vue'
 const show = ref(false)
 const CreditCardError = ref()
 const CreditCardToken = ref()
 </script>
 
 <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>