Added cursor to buttons

public/yorha-cursor.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#2D2C21;}
+</style>
+<rect x="28" y="23" transform="matrix(6.123234e-17 -1 1 6.123234e-17 5 54)" class="st0" width="3" height="3"/>
+<rect x="28" y="6" transform="matrix(6.123234e-17 -1 1 6.123234e-17 22 37)" class="st0" width="3" height="3"/>
+<g>
+	<path class="st0" d="M1,16l7,7l23-7L8,9L1,16z M10,16c0,0.8-0.7,1.5-1.5,1.5S7,16.8,7,16s0.7-1.5,1.5-1.5S10,15.2,10,16z"/>
+</g>
+</svg>

src/assets/main.css

@@ -11,3 +11,22 @@ body {
 body::before {
   @apply absolute content-[''] h-full w-full bg-[url('/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
 }
+
+.fade-enter-from {
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-enter-active {
+  transition: all 0.2s ease;
+}
+.fade-leave-from {
+  opacity: 1;
+}
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-leave-active {
+  transition: all 0.2s ease;
+}

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>

src/stores/banner.ts

@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useBannerStore = defineStore('bannerStore', () => {
+  const bannerText = ref<string | null>(null)
+
+  return { bannerText }
+})

src/views/HomeView.vue

@@ -5,27 +5,10 @@ import YrhBanner from '@/components/YrhBanner.vue'
 import YrhHeading from '@/components/YrhHeading.vue'
 import YrhMainNav from '@/components/YrhMainNav.vue'
 
-const activeItem = ref<string | null>()
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
 
-function handleActiveItem(key: string) {
-  activeItem.value = key
-}
-function handleInactiveMenu() {
-  activeItem.value = null
-}
-
-const activeItemDescription = computed(() => {
-  switch (activeItem.value) {
-    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'
-  }
-})
+const { bannerText } = storeToRefs(useBannerStore())
 </script>
 
 <template>
@@ -33,40 +16,16 @@ const activeItemDescription = computed(() => {
     <YrhHeading> YORHA SYSTEM </YrhHeading>
     <div class="grid grid-cols-4 items-center">
       <div>
-        <YrhMainNav
-          @set-active-item="handleActiveItem"
-          @remove-active-item="handleInactiveMenu"
-        ></YrhMainNav>
+        <YrhMainNav />
       </div>
     </div>
     <div>
       <YrhBanner>
         <Transition name="fade">
-          <span v-if="activeItem">{{ activeItemDescription }}</span>
+          <span v-if="bannerText">{{ bannerText }}</span>
           <span v-else>&#8203;</span>
         </Transition>
       </YrhBanner>
     </div>
   </main>
 </template>
-
-<style>
-.fade-enter-from {
-  opacity: 0;
-}
-.fade-enter-to {
-  opacity: 1;
-}
-.fade-enter-active {
-  transition: all 0.3s ease;
-}
-.fade-leave-from {
-  opacity: 1;
-}
-.fade-leave-to {
-  opacity: 0;
-}
-.fade-leave-active {
-  transition: all 0.3s ease;
-}
-</style>