Added menu interaction

.eslintrc.cjs

@@ -15,7 +15,6 @@ module.exports = {
     '@vue/eslint-config-prettier/skip-formatting'
   ],
   rules: {
-    indent: ['error', 2],
     'prettier/prettier': [
       'error',
       {

env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-declare module '@vueuse/sound'

package.json

@@ -20,7 +20,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@vueuse/core": "^10.1.2",
-    "@vueuse/sound": "^2.0.1",
     "pinia": "^2.0.35",
     "sass": "^1.62.1",
     "vue": "^3.2.47",

src/assets/main.css

@@ -5,7 +5,7 @@
 @tailwind utilities;
 
 body {
-  @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400 bg-[url('/yorha-bg.svg')] bg-contain bg-no-repeat
+  @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400
 }
 
 body::before {

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>

src/views/HomeView.vue

@@ -1,16 +1,72 @@
 <script lang="ts" setup>
-import YrhButton from '@/components/YrhButton.vue'
+import { computed, ref } from 'vue'
+
+import YrhBanner from '@/components/YrhBanner.vue'
 import YrhHeading from '@/components/YrhHeading.vue'
+import YrhMainNav from '@/components/YrhMainNav.vue'
+
+const activeItem = ref<string | null>()
+
+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'
+  }
+})
 </script>
 
 <template>
-  <main>
-    <YrhHeading> MENU PRINCIPAL </YrhHeading>
-    <YrhButton has-square> Language </YrhButton>
-    <YrhButton has-square> Settings </YrhButton>
-    <YrhButton has-square> Camera </YrhButton>
-    <YrhButton has-square> Screen </YrhButton>
-    <YrhButton has-square> Sound </YrhButton>
-    <YrhButton has-square> Other </YrhButton>
+  <main class="container grid grid-rows-[auto_1fr_5vh]">
+    <YrhHeading> YORHA SYSTEM </YrhHeading>
+    <div class="grid grid-cols-4 items-center">
+      <div>
+        <YrhMainNav
+          @set-active-item="handleActiveItem"
+          @remove-active-item="handleInactiveMenu"
+        ></YrhMainNav>
+      </div>
+    </div>
+    <div>
+      <YrhBanner>
+        <Transition name="fade">
+          <span v-if="activeItem">{{ activeItemDescription }}</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>

tailwind.config.js

@@ -28,6 +28,9 @@ module.exports = {
           800: '#3A382C',
           900: '#2d2c21'
         }
+      },
+      boxShadow: {
+        sharpest: '2px 2px #2d2c2150'
       }
     }
   },