Cleaned layout (titles, rules, stores)

src/views/DataView.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import YrhBanner from '@/components/YrhBanner.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
 
@@ -9,8 +8,6 @@ const { bannerText } = storeToRefs(useBannerStore())
 
 <template>
   <main class="container max-h-screen grid grid-rows-[auto_1fr_auto] overflow-auto">
-    <YrhHeading> ANDROID DATA </YrhHeading>
-
     <RouterView v-slot="{ Component }">
       <Transition name="fade" mode="out-in">
         <component :is="Component" />

src/views/HomeView.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-
 import YrhBanner from '@/components/YrhBanner.vue'
 import YrhHeading from '@/components/YrhHeading.vue'
 import YrhNav from '@/components/YrhNav.vue'
-
+import type { MenuItem } from '@/models/YrhNavItem'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
-import type { MenuItem } from '@/models/YrhNavItem'
+import { ref, onMounted } from 'vue'
 
 const { bannerText } = storeToRefs(useBannerStore())
 
@@ -62,6 +60,10 @@ const activeRoute = ref<string | null>('')
 function switchActiveRoute(key: string | null) {
   activeRoute.value = key
 }
+
+onMounted(() => {
+  bannerText.value = null
+})
 </script>
 
 <template>

src/views/datas/ItemsView.vue

@@ -1,12 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import YrhCard from '@/components/YrhCard.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
 import ItemSelection from '@/components/datas/items/ItemSelection.vue'
+import { useBannerStore } from '@/stores/banner'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'
-import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
+import { computed, onMounted } from 'vue'
 
 const { currentItem, availableItems } = storeToRefs(useItemStore())
+const { bannerText } = storeToRefs(useBannerStore())
 
 const currentItemImage = computed(() => {
   switch (currentItem.value?.category) {
@@ -20,9 +23,17 @@ const currentItemImage = computed(() => {
       return null
   }
 })
+
+onMounted(() => {
+  bannerText.value = 'Select item'
+})
 </script>
 
 <template>
+  <YrhHeading>
+    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" />