Extract VHeader component

Signed-off-by: Olga Bulat <[email protected]>

frontend/src/components/VHeader/VHeader.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useElementSize } from "@vueuse/core"
+import { computed, ref, watch } from "vue"
+
+import { useUiStore } from "~/stores/ui"
+
+import VBanners from "~/components/VBanner/VBanners.vue"
+import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
+import VHeaderDesktop from "~/components/VHeader/VHeaderDesktop.vue"
+import VHeaderMobile from "~/components/VHeader/VHeaderMobile/VHeaderMobile.vue"
+
+const props = withDefaults(
+  defineProps<{
+    showBottomBorder?: boolean
+    kind: "internal" | "search-desktop" | "search-mobile"
+    color?: "default" | "complementary"
+  }>(),
+  {
+    showBottomBorder: false,
+    color: "default",
+  }
+)
+
+const headerRef = ref<HTMLElement | null>(null)
+const uiStore = useUiStore()
+const { height } = useElementSize(headerRef)
+watch(height, (height) => {
+  uiStore.setHeaderHeight(height)
+})
+
+const comp = computed(() => {
+  return {
+    internal: VHeaderInternal,
+    "search-desktop": VHeaderDesktop,
+    "search-mobile": VHeaderMobile,
+  }[props.kind]
+})
+
+const bg = computed(() => `bg-${props.color}`)
+</script>
+
+<template>
+  <div ref="headerRef" class="header-el" :class="bg">
+    <VBanners />
+    <component
+      :is="comp"
+      class="h-20 border-b"
+      :class="[showBottomBorder ? 'border-b-default' : 'border-b-tx', bg]"
+    />
+  </div>
+</template>

frontend/src/layouts/content-layout.vue

@@ -5,9 +5,8 @@ import { useWindowScroll } from "@vueuse/core"
 
 import { ShowScrollButtonKey } from "~/types/provides"
 
-import VBanners from "~/components/VBanner/VBanners.vue"
 import VFooter from "~/components/VFooter/VFooter.vue"
-import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
+import VHeader from "~/components/VHeader/VHeader.vue"
 
 /**
  * This is the ContentLayout: the single result and the content pages.
@@ -32,13 +31,11 @@ provide(ShowScrollButtonKey, showScrollButton)
   <div
     class="app min-h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] bg-default"
   >
-    <div class="header-el sticky top-0 z-40 block bg-default">
-      <VBanners />
-      <VHeaderInternal
-        class="h-20 border-b bg-default"
-        :class="isHeaderScrolled ? 'border-b-default' : 'border-b-tx'"
-      />
-    </div>
+    <VHeader
+      kind="internal"
+      :show-bottom-border="isHeaderScrolled"
+      class="header-el sticky top-0 z-40"
+    />
 
     <div class="main-page flex h-full w-full min-w-0 flex-col justify-between">
       <slot />

frontend/src/layouts/default.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import VBanners from "~/components/VBanner/VBanners.vue"
 import VFooter from "~/components/VFooter/VFooter.vue"
-import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
+import VHeader from "~/components/VHeader/VHeader.vue"
 /**
  * The default layout is one screen high and yellow, without sidebars.
  */
@@ -14,10 +13,7 @@ defineOptions({
   <div
     class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-complementary"
   >
-    <div class="header-el">
-      <VBanners />
-      <VHeaderInternal class="bg-complementary" />
-    </div>
+    <VHeader class="header-el" kind="internal" color="complementary" />
     <div class="main-content flex flex-grow flex-col overflow-y-scroll">
       <slot class="flex-grow" />
       <VFooter mode="internal" class="bg-complementary" />

frontend/src/layouts/search-layout.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, provide, ref, watch } from "vue"
-import { useElementSize, useScroll } from "@vueuse/core"
+import { useScroll } from "@vueuse/core"
 
 import { useUiStore } from "~/stores/ui"
 import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 
 import { IsHeaderScrolledKey, IsSidebarVisibleKey } from "~/types/provides"
 
-import VBanners from "~/components/VBanner/VBanners.vue"
 import VFooter from "~/components/VFooter/VFooter.vue"
 import VSearchGridFilter from "~/components/VFilters/VSearchGridFilter.vue"
 import VSafeBrowsing from "~/components/VSafeBrowsing/VSafeBrowsing.vue"
-import VHeaderDesktop from "~/components/VHeader/VHeaderDesktop.vue"
-import VHeaderMobile from "~/components/VHeader/VHeaderMobile/VHeaderMobile.vue"
+import VHeader from "~/components/VHeader/VHeader.vue"
 
 defineOptions({
   name: "SearchLayout",
@@ -45,7 +43,6 @@ const showScrollButton = ref(false)
  * Note: template refs do not work in a Nuxt layout, so we get the `main-page` element using `document.getElementById`.
  */
 let mainPageElement = ref<HTMLElement | null>(null)
-let headerElement = ref<HTMLElement | null>(null)
 
 const { y: mainPageY } = useScroll(mainPageElement)
 watch(mainPageY, (y) => {
@@ -55,24 +52,10 @@ watch(mainPageY, (y) => {
 
 onMounted(() => {
   mainPageElement.value = document.getElementById("main-page")
-  headerElement.value = document.getElementsByClassName(
-    "header-el"
-  )[0] as HTMLElement
-})
-
-const { height } = useElementSize(headerElement)
-watch(height, (height) => {
-  uiStore.setHeaderHeight(height)
 })
 
 provide(IsHeaderScrolledKey, isHeaderScrolled)
 provide(IsSidebarVisibleKey, isSidebarVisible)
-
-const headerBorder = computed(() =>
-  isHeaderScrolled.value || isSidebarVisible.value
-    ? "border-b-default"
-    : "border-b-tx"
-)
 </script>
 
 <template>
@@ -84,19 +67,11 @@ const headerBorder = computed(() =>
         : 'grid-cols-1',
     ]"
   >
-    <div class="header-el bg-default">
-      <VBanners />
-      <VHeaderDesktop
-        v-if="isDesktopLayout"
-        class="h-20 border-b bg-default"
-        :class="headerBorder"
-      />
-      <VHeaderMobile
-        v-else
-        class="h-20 border-b bg-default"
-        :class="headerBorder"
-      />
-    </div>
+    <VHeader
+      class="header-el"
+      :kind="isDesktopLayout ? 'search-desktop' : 'search-mobile'"
+      :show-bottom-border="isHeaderScrolled"
+    />
 
     <aside
       v-if="isSidebarVisible"