Move border bottom to the header-el

WordPress · Jul 14, 2023 · 966c08c · 966c08c
1 parent f9520f7
commit 966c08c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 25 deletions.
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -1,11 +1,6 @@
 <template>
   <header
-    class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 border-b bg-white px-6 py-4"
-    :class="
-      isHeaderScrolled || isSidebarVisible
-        ? 'border-dark-charcoal-20'
-        : 'border-white'
-    "
+    class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 bg-white px-6 py-4"
   >
     <VLogoButton :is-fetching="isFetching" />
 
@@ -52,7 +47,7 @@ import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
-import { IsHeaderScrolledKey, IsSidebarVisibleKey } from "~/types/provides"
+import { IsSidebarVisibleKey } from "~/types/provides"
 
 import { useAnalytics } from "~/composables/use-analytics"
 import { useSearch } from "~/composables/use-search"
@@ -87,7 +82,6 @@ export default defineComponent({
     const searchStore = useSearchStore()
     const uiStore = useUiStore()
 
-    const isHeaderScrolled = inject<Ref<boolean>>(IsHeaderScrolledKey)
     const isSidebarVisible = inject<Ref<boolean>>(IsSidebarVisibleKey)
 
     const isFetching = computed(() => mediaStore.fetchState.isFetching)
@@ -129,7 +123,6 @@ export default defineComponent({
       searchBarRef,
       isFetching,
 
-      isHeaderScrolled,
       isSidebarVisible,
       areFiltersDisabled,
       isXl,

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -1,8 +1,7 @@
 <template>
   <header
     ref="headerRef"
-    class="main-header z-30 flex w-full items-center border-b border-tx bg-white px-6 py-4"
-    :class="{ 'border-dark-charcoal-20': isHeaderScrolled }"
+    class="main-header z-30 flex w-full items-center bg-white px-6 py-4"
   >
     <VInputModal
       class="flex w-full"
@@ -111,15 +110,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, nextTick, ref, watch } from "vue"
+import { computed, defineComponent, nextTick, ref, watch } from "vue"
 
 import { ensureFocus } from "~/utils/reakit-utils/focus"
 import { cyclicShift } from "~/utils/math"
 
 import { keycodes } from "~/constants/key-codes"
 
-import { IsHeaderScrolledKey } from "~/types/provides"
-
 import { useAnalytics } from "~/composables/use-analytics"
 import { useDialogControl } from "~/composables/use-dialog-control"
 import { useSearch } from "~/composables/use-search"
@@ -159,8 +156,6 @@ export default defineComponent({
     const searchBarIsActive = ref(false)
     const contentSettingsOpen = ref(false)
 
-    const isHeaderScrolled = inject(IsHeaderScrolledKey)
-
     const isFetching = computed(() => mediaStore.fetchState.isFetching)
 
     const { sendCustomEvent } = useAnalytics()
@@ -295,7 +290,6 @@ export default defineComponent({
       searchInputRef,
       headerRef,
 
-      isHeaderScrolled,
       isFetching,
 
       appliedFilterCount,

diff --git a/frontend/src/layouts/content-layout.vue b/frontend/src/layouts/content-layout.vue
@@ -5,12 +5,12 @@
       class="app grid min-h-[100dvh] min-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] bg-white"
       :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]"
     >
-      <div class="header-el sticky top-0 z-40 block bg-white">
+      <div
+        class="header-el sticky top-0 z-40 block border-b bg-white"
+        :class="isHeaderScrolled ? 'border-b-dark-charcoal-20' : 'border-b-tx'"
+      >
         <VBanners />
-        <VHeaderInternal
-          class="h-20 bg-white"
-          :class="{ 'border-b-dark-charcoal-20': isHeaderScrolled }"
-        />
+        <VHeaderInternal class="h-20 bg-white" />
       </div>
 
       <div
@@ -36,7 +36,7 @@ import { useLayout } from "~/composables/use-layout"
 import { useUiStore } from "~/stores/ui"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
-import { IsHeaderScrolledKey, ShowScrollButtonKey } from "~/types/provides"
+import { ShowScrollButtonKey } from "~/types/provides"
 
 import VBanners from "~/components/VBanner/VBanners.vue"
 import VFooter from "~/components/VFooter/VFooter.vue"
@@ -92,7 +92,6 @@ export default defineComponent({
     const showScrollButton = computed(() => scrollY.value > 70)
 
     provide(ShowScrollButtonKey, showScrollButton)
-    provide(IsHeaderScrolledKey, isHeaderScrolled)
 
     return {
       isHeaderScrolled,

diff --git a/frontend/src/layouts/search-layout.vue b/frontend/src/layouts/search-layout.vue
@@ -12,7 +12,14 @@
           : 'grid-cols-1',
       ]"
     >
-      <div class="header-el bg-white">
+      <div
+        class="header-el border-b bg-white"
+        :class="
+          isHeaderScrolled || isSidebarVisible
+            ? 'border-b-dark-charcoal-20'
+            : 'border-b-tx'
+        "
+      >
         <VBanners />
         <VHeaderDesktop v-if="isDesktopLayout" class="h-20 bg-white" />
         <VHeaderMobile v-else class="h-20 bg-white" />