Added cursor to buttons

src/components/YrhButton.vue

@@ -1,8 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useElementHover, useFocus } from '@vueuse/core'
 
 const hoverSfx = new Audio('/sounds/btn-hover.mp3')
 
+const btnRef = ref<HTMLElement | null>()
+const isBtnHovered = useElementHover(btnRef)
+const { focused: isBtnFocused } = useFocus(btnRef)
+
+const shouldArrowDisplay = computed(() => isBtnFocused.value || isBtnHovered.value)
+
 function playHoverSfx() {
   hoverSfx.play()
 }
@@ -14,6 +21,7 @@ const props = defineProps<{
   disabled?: boolean
   isActive?: boolean
   hasSquare?: boolean
+  hasArrow?: boolean
 }>()
 
 const attributes = {
@@ -28,6 +36,11 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
 
 <template>
   <component
+    :ref="
+      (el: HTMLElement) => {
+        btnRef = el
+      }
+    "
     :is="elementTag"
     v-bind="attributes"
     class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
@@ -35,6 +48,16 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
     @focusin="playHoverSfx"
     @mouseover="playHoverSfx"
   >
+    <Transition name="fade" :duration="{ enter: 100, leave: 100 }">
+      <img
+        v-if="shouldArrowDisplay"
+        src="/yorha-cursor.svg"
+        height="32"
+        width="32"
+        class="absolute top-1/2 -translate-y-1/2 -left-10 scale-90 pointer-events-none"
+        alt=""
+      />
+    </Transition>
     <span class="mr-1" v-if="hasSquare">
       <font-awesome-icon :icon="['fas', 'square']" />
     </span>

src/components/YrhMainNav.vue

@@ -1,67 +1,109 @@
 <script lang="ts" setup>
+import { ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { storeToRefs } from 'pinia'
 import YrhButton from './YrhButton.vue'
 
-const emit = defineEmits<{
-  (e: 'set-active-item', key: string): void
-  (e: 'remove-active-item'): void
-}>()
+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()
   }
-  emit('set-active-item', key)
+  activeKey.value = key
+  bannerText.value = handleBannerUpdate(key)
 }
 
 function handleInactiveState() {
   if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
-    emit('remove-active-item')
+    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>
-  <menu>
-    <li>
-      <YrhButton
-        has-square
-        @mouseenter="handleActiveBtn($event, 'current-data')"
-        @focus="handleActiveBtn($event, 'current-data')"
-        @mouseleave="handleInactiveState"
-        @blur="handleInactiveState"
-      >
-        Current Data
-      </YrhButton>
-    </li>
-    <li>
-      <YrhButton
-        has-square
-        @mouseenter="handleActiveBtn($event, 'settings')"
-        @focus="handleActiveBtn($event, 'settings')"
-        @mouseleave="handleInactiveState"
-        @blur="handleInactiveState"
-      >
-        Settings
-      </YrhButton>
-    </li>
-    <li>
-      <YrhButton
-        has-square
-        @mouseenter="handleActiveBtn($event, 'credits')"
-        @focus="handleActiveBtn($event, 'credits')"
-        @mouseleave="handleInactiveState"
-        @blur="handleInactiveState"
-      >
-        Credits
-      </YrhButton>
-    </li>
-  </menu>
+  <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>