From 17a41714c7da3d281092ee0b5064130325530129 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 9 May 2023 17:37:03 +0200
Subject: [PATCH] Added menu interaction

---
 .eslintrc.cjs                               |   1 -
 env.d.ts                                    |   1 -
 package.json                                |   1 -
 {src/assets => public}/sounds/btn-hover.mp3 | Bin
 src/assets/main.css                         |   2 +-
 src/components/YrhBanner.vue                |  39 +++++++++++
 src/components/YrhButton.vue                |  12 ++--
 src/components/YrhHeading.vue               |   2 +-
 src/components/YrhMainNav.vue               |  67 ++++++++++++++++++
 src/views/HomeView.vue                      |  74 +++++++++++++++++---
 tailwind.config.js                          |   3 +
 11 files changed, 182 insertions(+), 20 deletions(-)
 rename {src/assets => public}/sounds/btn-hover.mp3 (100%)
 create mode 100644 src/components/YrhBanner.vue
 create mode 100644 src/components/YrhMainNav.vue

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 2d8696b..2de538e 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -15,7 +15,6 @@ module.exports = {
     '@vue/eslint-config-prettier/skip-formatting'
   ],
   rules: {
-    indent: ['error', 2],
     'prettier/prettier': [
       'error',
       {
diff --git a/env.d.ts b/env.d.ts
index 4791171..11f02fe 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-declare module '@vueuse/sound'
diff --git a/package.json b/package.json
index 8ebb122..caf7685 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/sounds/btn-hover.mp3 b/public/sounds/btn-hover.mp3
similarity index 100%
rename from src/assets/sounds/btn-hover.mp3
rename to public/sounds/btn-hover.mp3
diff --git a/src/assets/main.css b/src/assets/main.css
index fa791d0..39df839 100644
--- a/src/assets/main.css
+++ b/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 {
diff --git a/src/components/YrhBanner.vue b/src/components/YrhBanner.vue
new file mode 100644
index 0000000..96ed1d6
--- /dev/null
+++ b/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>
diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue
index 0668257..9ec8ca4 100644
--- a/src/components/YrhButton.vue
+++ b/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']" />
diff --git a/src/components/YrhHeading.vue b/src/components/YrhHeading.vue
index 0239d18..26de8b3 100644
--- a/src/components/YrhHeading.vue
+++ b/src/components/YrhHeading.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="mb-8 text-4xl">
+  <h1 class="text-4xl">
     <slot />
   </h1>
 </template>
diff --git a/src/components/YrhMainNav.vue b/src/components/YrhMainNav.vue
new file mode 100644
index 0000000..8c24534
--- /dev/null
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6d4cba0..4f4f336 100644
--- a/src/views/HomeView.vue
+++ b/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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3a6258f..815358f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,9 @@ module.exports = {
           800: '#3A382C',
           900: '#2d2c21'
         }
+      },
+      boxShadow: {
+        sharpest: '2px 2px #2d2c2150'
       }
     }
   },