LayoutHeader.vue

<template>
  <div
    class="
      header
      bg-white
      w-full
      fixed
      z-20
      top-0
      transition
      duration-300
      transform
      translate-y-0
      dark:bg-black dark:text-gray-300
    "
    :class="{ '-translate-y-20': scrolled }"
  >
    <nav class="container flex justify-between items-center mx-auto h-16">
      <LayoutHeaderMenuHamburger class="mr-3 flex lg:hidden">
        <LayoutHeaderMenu class="flex-col space-y-4" />
      </LayoutHeaderMenuHamburger>

      <LayoutHeaderLogo :show-title="!searchFocus" />

      <div class="flex justify-end items-center relative">
        <LayoutHeaderMenuSearch @search-focus="searchFocus = $event" />

        <LayoutHeaderMenu class="hidden lg:flex" />

        <AppDarkModeToggle class="hidden xl:inline-flex ml-3" />

        <LayoutHeaderMenuAvatar class="hidden sm:block" />
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'LayoutHeader',
  data() {
    return {
      limitPosition: 64,
      scrolled: false,
      lastPosition: 0,
      searchFocus: false,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      if (
        this.lastPosition < window.scrollY &&
        this.limitPosition < window.scrollY
      ) {
        this.scrolled = true
        // move up!
      }

      if (this.lastPosition > window.scrollY) {
        this.scrolled = false
        // move down
      }

      this.lastPosition = window.scrollY
      // this.scrolled = window.scrollY > 250;
    },
  },
}
</script>

<style lang="postcss" scoped>
.header {
  /* Copied from discourse */
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 25%);
}
</style>