Finished in page navigation comp

src/views/HomeView.vue

@@ -3,12 +3,37 @@ import { computed, ref } from 'vue'
 
 import YrhBanner from '@/components/YrhBanner.vue'
 import YrhHeading from '@/components/YrhHeading.vue'
-import YrhMainNav from '@/components/YrhMainNav.vue'
+import YrhNav from '@/components/YrhNav.vue'
 
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
+import type { MenuItem } from '@/models/YrhNavItem'
 
 const { bannerText } = storeToRefs(useBannerStore())
+
+const availableRoutes: MenuItem[] = [
+  {
+    id: 'current-data',
+    label: 'Current Data',
+    bannerText: 'Search through current file data'
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    bannerText: 'Modify personnal data'
+  },
+  {
+    id: 'credits',
+    label: 'Credits',
+    bannerText: "Search through personnel's archive"
+  }
+]
+
+const activeRoute = ref<string | null>('')
+
+function switchActiveRoute(key: string | null) {
+  activeRoute.value = key
+}
 </script>
 
 <template>
@@ -16,8 +41,9 @@ const { bannerText } = storeToRefs(useBannerStore())
     <YrhHeading> YORHA SYSTEM </YrhHeading>
     <div class="grid grid-cols-4 items-center">
       <div>
-        <YrhMainNav />
+        <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
       </div>
+      <div>Secondary level (like settings)</div>
     </div>
     <div>
       <YrhBanner>
@@ -28,4 +54,5 @@ const { bannerText } = storeToRefs(useBannerStore())
       </YrhBanner>
     </div>
   </main>
+  {{ activeRoute }}
 </template>