Added menu interaction

src/components/YrhBanner.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="banner shadow-sharpest py-3 px-9">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  background-color: rgba(#fff, 0.25);
+
+  &::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.9;
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    content: '';
+    bottom: 5px;
+    right: 5px;
+    height: 8px;
+    width: 8px;
+    background-color: var(--color-y-beige-900);
+    opacity: 0.9;
+  }
+}
+</style>

src/components/YrhButton.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { useSound } from '@vueuse/sound'
 import { computed } from 'vue'
 
-import buttonSfx from '@/assets/sounds/btn-hover.mp3'
+const hoverSfx = new Audio('/sounds/btn-hover.mp3')
 
-const { play, stop } = useSound(buttonSfx)
+function playHoverSfx() {
+  hoverSfx.play()
+}
 
 const props = defineProps<{
   href?: string
@@ -31,9 +32,8 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
     v-bind="attributes"
     class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
     :class="{ active: isActive }"
-    @focus="play"
-    @mouseover="play"
-    @mouseleave="stop"
+    @focusin="playHoverSfx"
+    @mouseover="playHoverSfx"
   >
     <span class="mr-1" v-if="hasSquare">
       <font-awesome-icon :icon="['fas', 'square']" />

src/components/YrhHeading.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="mb-8 text-4xl">
+  <h1 class="text-4xl">
     <slot />
   </h1>
 </template>

src/components/YrhMainNav.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import YrhButton from './YrhButton.vue'
+
+const emit = defineEmits<{
+  (e: 'set-active-item', key: string): void
+  (e: 'remove-active-item'): void
+}>()
+
+function handleActiveBtn(e: Event, key: string) {
+  if (document.activeElement && e.type === 'mouseenter') {
+    ;(document.activeElement as HTMLElement).blur()
+  }
+  emit('set-active-item', key)
+}
+
+function handleInactiveState() {
+  if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
+    emit('remove-active-item')
+  }
+}
+</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>
+</template>
+
+<style lang="scss" scoped>
+menu {
+  li {
+    @apply mb-3;
+  }
+}
+</style>