From f95e591585649f14164e22baed33b688cacbf006 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 10 May 2023 23:22:14 +0200
Subject: [PATCH] Added secondary menu test

---
 src/App.vue               |  6 +++++-
 src/components/YrhNav.vue |  1 +
 src/models/YrhNavItem.ts  |  1 +
 src/views/DataView.vue    |  0
 src/views/HomeView.vue    | 36 +++++++++++++++++++++++++++++++++---
 5 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/views/DataView.vue

diff --git a/src/App.vue b/src/App.vue
index 281f8d6..73b4767 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,11 @@ import { RouterView } from 'vue-router'
 
 <template>
   <div id="wrapper" class="py-16 px-8">
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+      <Transition mode="out-in">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
   </div>
 </template>
 
diff --git a/src/components/YrhNav.vue b/src/components/YrhNav.vue
index dc65ee2..6e30519 100644
--- a/src/components/YrhNav.vue
+++ b/src/components/YrhNav.vue
@@ -51,6 +51,7 @@ function handleInactiveState() {
       >
         <YrhButton
           has-square
+          :href="item.href"
           :has-arrow="item.id === clickedKey ? 'force' : true"
           :is-active="item.id === clickedKey"
           @mouseenter="handleActiveBtn($event, item)"
diff --git a/src/models/YrhNavItem.ts b/src/models/YrhNavItem.ts
index 2994d31..97c0caa 100644
--- a/src/models/YrhNavItem.ts
+++ b/src/models/YrhNavItem.ts
@@ -2,4 +2,5 @@ export interface MenuItem {
   id: string
   label: string
   bannerText: string
+  href?: string
 }
diff --git a/src/views/DataView.vue b/src/views/DataView.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 16f4fd0..1088c5a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -29,8 +29,35 @@ const availableRoutes: MenuItem[] = [
   }
 ]
 
-const activeRoute = ref<string | null>('')
+const settingsOptions: MenuItem[] = [
+  {
+    id: 'dark-mode',
+    label: 'Dark Mode',
+    bannerText: 'Alter the terminal appearance'
+  },
+  {
+    id: 'language',
+    label: 'Language',
+    bannerText: 'Change terminal language'
+  },
+  {
+    id: 'audio',
+    label: 'Audio',
+    bannerText: 'Change audio settings'
+  },
+  {
+    id: 'video',
+    label: 'Video',
+    bannerText: 'Change video settings'
+  },
+  {
+    id: 'controls',
+    label: 'Controls',
+    bannerText: 'Change keyboard or gamepad controls'
+  }
+]
 
+const activeRoute = ref<string | null>('')
 function switchActiveRoute(key: string | null) {
   activeRoute.value = key
 }
@@ -43,7 +70,11 @@ function switchActiveRoute(key: string | null) {
       <div>
         <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
       </div>
-      <div>Secondary level (like settings)</div>
+      <Transition name="fade" mode="out-in">
+        <YrhNav v-if="activeRoute === 'current-data'" :items="settingsOptions" />
+        <YrhNav v-else-if="activeRoute === 'settings'" :items="settingsOptions" />
+        <YrhNav v-else-if="activeRoute === 'credits'" :items="settingsOptions" />
+      </Transition>
     </div>
     <div>
       <YrhBanner>
@@ -54,5 +85,4 @@ function switchActiveRoute(key: string | null) {
       </YrhBanner>
     </div>
   </main>
-  {{ activeRoute }}
 </template>