Finished in page navigation comp

src/components/YrhButton.vue

@@ -9,10 +9,15 @@ const btnRef = ref<HTMLElement | null>()
 const isBtnHovered = useElementHover(btnRef)
 const { focused: isBtnFocused } = useFocus(btnRef)
 
-const shouldArrowDisplay = computed(() => isBtnFocused.value || isBtnHovered.value)
+const emit = defineEmits(['clicked'])
+
+const shouldArrowDisplay = computed(
+  () => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force'
+)
 
 function handleClick() {
   clickSfx.play()
+  emit('clicked')
 }
 
 function handleMouseOver() {
@@ -31,7 +36,7 @@ const props = defineProps<{
   disabled?: boolean
   isActive?: boolean
   hasSquare?: boolean
-  hasArrow?: boolean
+  hasArrow?: boolean | 'force'
 }>()
 
 const attributes = {
@@ -63,7 +68,8 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
         src="/yorha-cursor.svg"
         height="32"
         width="32"
-        class="absolute top-1/2 -translate-y-1/2 -left-10 scale-90 pointer-events-none"
+        class="absolute top-1/2 -translate-y-1/2 -left-10 scale-90 pointer-events-none transition-all"
+        :class="{ 'invert-[.33] opacity-60': props.hasArrow === 'force' }"
         alt=""
       />
     </Transition>

src/components/YrhMainNav.vue

@@ -1,109 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import type { Ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import YrhButton from './YrhButton.vue'
-
-import { useBannerStore } from '@/stores/banner'
-
-const { bannerText } = storeToRefs(useBannerStore())
-
-const activeKey = ref<string | null>(null)
-
-function handleActiveBtn(e: Event, key: string) {
-  if (document.activeElement && e.type === 'mouseenter') {
-    ;(document.activeElement as HTMLElement).blur()
-  }
-  activeKey.value = key
-  bannerText.value = handleBannerUpdate(key)
-}
-
-function handleInactiveState() {
-  if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
-    bannerText.value = null
-  }
-  activeKey.value = null
-}
-
-function handleBannerUpdate(key: string) {
-  switch (key) {
-    case 'current-data':
-      return 'Search through current file data'
-    case 'settings':
-      return 'Modify personnal data'
-    case 'credits':
-      return 'Obtain personnel archives'
-    default:
-      return 'Unknown data'
-  }
-}
-</script>
-
-<template>
-  <div class="relative">
-    <menu>
-      <li>
-        <YrhButton
-          has-square
-          has-arrow
-          @mouseenter="handleActiveBtn($event, 'current-data')"
-          @focus="handleActiveBtn($event, 'current-data')"
-          @mouseleave="handleInactiveState"
-          @blur="handleInactiveState"
-        >
-          Current Data
-        </YrhButton>
-      </li>
-      <li>
-        <YrhButton
-          has-square
-          has-arrow
-          @mouseenter="handleActiveBtn($event, 'settings')"
-          @focus="handleActiveBtn($event, 'settings')"
-          @mouseleave="handleInactiveState"
-          @blur="handleInactiveState"
-        >
-          Settings
-        </YrhButton>
-      </li>
-      <li>
-        <YrhButton
-          has-square
-          has-arrow
-          @mouseenter="handleActiveBtn($event, 'credits')"
-          @focus="handleActiveBtn($event, 'credits')"
-          @mouseleave="handleInactiveState"
-          @blur="handleInactiveState"
-        >
-          Credits
-        </YrhButton>
-      </li>
-    </menu>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-menu {
-  position: relative;
-  @apply pl-9;
-
-  li {
-    @apply mb-3;
-  }
-
-  &::before {
-    display: block;
-    position: absolute;
-    content: '';
-    top: 0;
-    bottom: 0;
-    left: 0;
-    height: 100%;
-    width: 15px;
-    border-left-width: 8px;
-    border-right-width: 2px;
-    border-color: var(--color-y-beige-900);
-    opacity: 0.25;
-  }
-}
-</style>

src/components/YrhNav.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import YrhButton from './YrhButton.vue'
+
+import { useBannerStore } from '@/stores/banner'
+import type { MenuItem } from '@/models/YrhNavItem'
+const { bannerText } = storeToRefs(useBannerStore())
+
+const props = defineProps<{
+  items?: MenuItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'change-nav', key: string | null): void
+}>()
+
+const clickedKey = ref<string | null>(null)
+const activeKey = ref<string | null>(null)
+
+function handleClickedKey(e: Event, item: MenuItem) {
+  clickedKey.value = item.id
+  emit('change-nav', item.id)
+}
+
+function handleActiveBtn(e: Event, item: MenuItem) {
+  if (document.activeElement && e.type === 'mouseenter') {
+    ;(document.activeElement as HTMLElement).blur()
+  }
+  activeKey.value = item.id
+  bannerText.value = item.bannerText
+}
+
+function handleInactiveState() {
+  if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
+    bannerText.value = null
+  }
+  activeKey.value = null
+}
+</script>
+
+<template>
+  <div class="relative">
+    <menu v-if="props.items">
+      <li
+        v-for="item in props.items"
+        :key="item.id"
+        class="transition-all"
+        :class="item.id === clickedKey ? 'w-full' : 'w-11/12'"
+      >
+        <YrhButton
+          has-square
+          :has-arrow="item.id === clickedKey ? 'force' : true"
+          :is-active="item.id === clickedKey"
+          @mouseenter="handleActiveBtn($event, item)"
+          @focus="handleActiveBtn($event, item)"
+          @mouseleave="handleInactiveState"
+          @blur="handleInactiveState"
+          @clicked="handleClickedKey($event, item)"
+        >
+          {{ item.label }}
+        </YrhButton>
+      </li>
+    </menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+menu {
+  position: relative;
+  @apply pl-9;
+
+  li {
+    @apply mb-3;
+  }
+
+  &::before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 15px;
+    border-left-width: 8px;
+    border-right-width: 2px;
+    border-color: var(--color-y-beige-900);
+    opacity: 0.25;
+  }
+}
+</style>

src/models/YrhNavItem.ts

@@ -0,0 +1,5 @@
+export interface MenuItem {
+  id: string
+  label: string
+  bannerText: string
+}

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>