Added secondary menu test

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>
 

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)"

src/models/YrhNavItem.ts

@@ -2,4 +2,5 @@ export interface MenuItem {
   id: string
   label: string
   bannerText: string
+  href?: string
 }

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>