Changed old component structures

src/components/YrhNav.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import YrhButton from '@/components/atoms/YrhButton.vue'
+
 import type { MenuItem } from '@/models/YrhNavItem'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
-import YrhButton from './YrhButton.vue'
 
 const { bannerText } = storeToRefs(useBannerStore())
 
@@ -42,7 +43,7 @@ function handleInactiveState() {
 
 <template>
   <div class="relative">
-    <menu v-if="props.items">
+    <menu v-if="props.items" class="pl-11">
       <li
         v-for="item in props.items"
         :key="item.id"
@@ -70,7 +71,6 @@ function handleInactiveState() {
 <style lang="scss" scoped>
 menu {
   position: relative;
-  @apply pl-11;
 
   li:not(:first-child) {
     @apply mt-3;

src/components/atoms/YrhButton.vue

@@ -65,12 +65,6 @@ function handleClick(e: MouseEvent) {
   }
 }
 
-function handleMouseOver() {
-  if (!isBtnFocused.value) {
-    playHoverSfx()
-  }
-}
-
 function handleFocusin() {
   if (!isBtnHovered.value) {
     playHoverSfx()
@@ -93,7 +87,6 @@ function handleFocusin() {
     @keyup.enter="handleClick"
     @keyup.space="handleClick"
     @focusin="handleFocusin"
-    @mouseover="handleMouseOver"
   >
     <Transition name="fade" :duration="{ enter: 100, leave: 100 }">
       <img
@@ -106,6 +99,7 @@ function handleFocusin() {
         alt=""
       />
     </Transition>
+
     <span class="mr-1" v-if="hasSquare">
       <font-awesome-icon :icon="['fas', 'square']" />
     </span>

src/components/config/YrhAudioMenu.vue

@@ -3,7 +3,7 @@ import YrhAudioSlider from './YrhAudioSlider.vue'
 </script>
 
 <template>
-  <menu>
+  <menu class="pl-11">
     <li>
       <YrhAudioSlider>Volume</YrhAudioSlider>
     </li>
@@ -13,7 +13,6 @@ import YrhAudioSlider from './YrhAudioSlider.vue'
 <style lang="scss" scoped>
 menu {
   position: relative;
-  @apply pl-11;
 
   li:not(:first-child) {
     @apply mt-3;

src/components/config/YrhAudioSlider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import YrhButton from '../YrhButton.vue'
+import YrhButton from '@/components/atoms/YrhButton.vue'
 </script>
 
 <template>

src/components/datas/YrhStatusCard.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import YrhCard from '@/components/atoms/YrhCard.vue'
+
 import { useStatusStore } from '@/stores/datas/statusStore'
 import { storeToRefs } from 'pinia'
-import YrhCard from '../YrhCard.vue'
 
 const { androidData } = storeToRefs(useStatusStore())
 </script>

src/components/datas/items/ItemSelection.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import YrhButton from '@/components/YrhButton.vue'
+import YrhButton from '@/components/atoms/YrhButton.vue'
+
 import type { GameItem } from '@/models/YrhGameItem'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import HomeVue from '../views/Home.vue'
+import HomeVue from '@/views/Home.vue'
-import DataVue from '../views/Data.vue'
+import DataVue from '@/views/Data.vue'
 import ItemsVue from '@/views/datas/Items.vue'
 import ConfigVue from '@/views/Config.vue'
 

src/views/Config.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import YrhBanner from '@/components/YrhBanner.vue'
+import YrhBanner from '@/components/atoms/YrhBanner.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
+import YrhHeading from '@/components/atoms/YrhHeading.vue'
 import YrhNav from '@/components/YrhNav.vue'
 import YrhAudioMenu from '@/components/config/YrhAudioMenu.vue'
 import type { MenuItem } from '@/models/YrhNavItem'

src/views/Data.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import YrhBanner from '@/components/YrhBanner.vue'
+import YrhBanner from '@/components/atoms/YrhBanner.vue'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
 

src/views/Home.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import YrhBanner from '@/components/YrhBanner.vue'
+import YrhBanner from '@/components/atoms/YrhBanner.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
+import YrhHeading from '@/components/atoms/YrhHeading.vue'
 import YrhNav from '@/components/YrhNav.vue'
 import type { MenuItem } from '@/models/YrhNavItem'
 import { useBannerStore } from '@/stores/banner'

src/views/datas/Items.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import YrhCard from '@/components/YrhCard.vue'
+import YrhCard from '@/components/atoms/YrhCard.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
+import YrhHeading from '@/components/atoms/YrhHeading.vue'
 import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
 import ItemSelection from '@/components/datas/items/ItemSelection.vue'
 import { useBannerStore } from '@/stores/banner'
@@ -34,10 +34,12 @@ onMounted(() => {
     ITEMS
     <template #subtitle> All items </template>
   </YrhHeading>
+
   <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
     <div class="items-container max-h-full overflow-hidden">
       <ItemSelection :items="availableItems" />
     </div>
+
     <div class="max-h-full">
       <Transition name="fade" mode="out-in">
         <YrhCard v-if="currentItem" breathe-bottom>