Added config page and store

For the future global sound handling

src/components/YrhButton.vue

@@ -2,11 +2,15 @@
 import { useElementHover, useFocus } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAppConfig } from '@/stores/configStore'
 
 const router = useRouter()
+const { globalSound } = useAppConfig()
 
 const hoverSfx = new Audio('/sounds/btn-hover.mp3')
 const clickSfx = new Audio('/sounds/btn-click.mp3')
+hoverSfx.volume = globalSound
+clickSfx.volume = globalSound
 
 const btnRef = ref<HTMLElement | null>()
 const isBtnHovered = useElementHover(btnRef)

src/components/YrhNav.vue

@@ -24,9 +24,10 @@ function handleClickedKey(e: Event, item: MenuItem) {
 }
 
 function handleActiveBtn(e: Event, item: MenuItem) {
-  // if (document.activeElement && e.type === 'mouseenter') {
-  //   ;(document.activeElement as HTMLElement).blur()
-  // }
+  if (document.activeElement && e.type === 'mouseenter') {
+    ;(document.activeElement as HTMLElement).blur()
+  }
+
   activeKey.value = item.id
   bannerText.value = item.bannerText
 }
@@ -71,8 +72,8 @@ menu {
   position: relative;
   @apply pl-11;
 
-  li {
-    @apply mb-3;
+  li:not(:first-child) {
+    @apply mt-3;
   }
 
   &::before {

src/components/config/YrhAudioMenu.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import YrhAudioSlider from './YrhAudioSlider.vue'
+</script>
+
+<template>
+  <menu>
+    <li>
+      <YrhAudioSlider>Volume</YrhAudioSlider>
+    </li>
+  </menu>
+</template>
+
+<style lang="scss" scoped>
+menu {
+  position: relative;
+  @apply pl-11;
+
+  li:not(:first-child) {
+    @apply mt-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/components/config/YrhAudioSlider.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import YrhButton from '../YrhButton.vue'
+</script>
+
+<template>
+  <YrhButton>
+    <slot />
+  </YrhButton>
+</template>

src/router/index.ts

@@ -1,8 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import HomeView from '../views/HomeView.vue'
-import DataView from '../views/DataView.vue'
-import ItemsView from '@/views/datas/ItemsView.vue'
+import HomeVue from '../views/Home.vue'
+import DataVue from '../views/Data.vue'
+import ItemsVue from '@/views/datas/Items.vue'
+import ConfigVue from '@/views/Config.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,22 +11,22 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      component: HomeVue
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: ConfigVue
     },
     {
       path: '/data',
       name: 'data',
-      component: DataView,
+      component: DataVue,
       children: [
         {
           path: 'items',
           name: 'items',
-          component: ItemsView
-        },
-        {
-          path: 'items',
-          name: 'items',
-          component: ItemsView
+          component: ItemsVue
         }
       ]
     }

src/stores/configStore.ts

@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppConfig = defineStore('appConfig', () => {
+  const globalSound = ref<number>(0.5)
+
+  return { globalSound }
+})

src/views/Config.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import YrhBanner from '@/components/YrhBanner.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhNav from '@/components/YrhNav.vue'
+import YrhAudioMenu from '@/components/config/YrhAudioMenu.vue'
+import type { MenuItem } from '@/models/YrhNavItem'
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
+import { ref, onMounted } from 'vue'
+
+const { bannerText } = storeToRefs(useBannerStore())
+
+const availableRoutes: MenuItem[] = [
+  {
+    id: 'language',
+    label: 'Language',
+    bannerText: 'Change terminal language'
+  },
+  {
+    id: 'audio',
+    label: 'Audio',
+    bannerText: 'Change audio settings'
+  }
+]
+
+const activeRoute = ref<string | null>('')
+function switchActiveRoute(key: string | null) {
+  activeRoute.value = key
+}
+
+onMounted(() => {
+  bannerText.value = null
+})
+</script>
+
+<template>
+  <main class="container grid grid-rows-[auto_1fr_5vh]">
+    <YrhHeading> SYSTEM CONFIGURATION </YrhHeading>
+    <div class="grid grid-cols-4 items-center">
+      <div>
+        <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
+      </div>
+      <Transition name="fade" mode="out-in">
+        <YrhAudioMenu v-if="activeRoute === 'language'">test 1</YrhAudioMenu>
+        <div v-else-if="activeRoute === 'audio'">test 2</div>
+      </Transition>
+    </div>
+    <div>
+      <YrhBanner>
+        <Transition name="fade">
+          <span v-if="bannerText">{{ bannerText }}</span>
+          <span v-else>&#8203;</span>
+        </Transition>
+      </YrhBanner>
+    </div>
+  </main>
+</template>

src/views/Home.vue

@@ -13,13 +13,14 @@ const availableRoutes: MenuItem[] = [
   {
     id: 'current-data',
     label: 'Current Data',
-    bannerText: 'Search through current file data',
+    bannerText: 'Search through android data',
     href: '/data/items'
   },
   {
     id: 'settings',
     label: 'Settings',
-    bannerText: 'Modify personnal data'
+    bannerText: 'Modify android configuration',
+    href: '/config'
   },
   {
     id: 'credits',
@@ -74,8 +75,7 @@ onMounted(() => {
         <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
       </div>
       <Transition name="fade" mode="out-in">
-        <YrhNav v-if="activeRoute === 'settings'" :items="settingsOptions" />
-        <YrhNav v-else-if="activeRoute === 'credits'" :items="settingsOptions" />
+        <YrhNav v-if="activeRoute === 'credits'" :items="settingsOptions" />
       </Transition>
     </div>
     <div>