ManualPage.vue

<template>
  <div class="flex flex-col h-screen">
    <ManualPageHeader class="hidden md:block" :state="state" />
    <SlideUp class="md:hidden block">
      <ManualPageHeader
        ref="mobileHeaderElement"
        v-show="scrollDirection === 'up'"
        :state="state"
        @toggleNavbar="showNavbar = !showNavbar"
      />
    </SlideUp>

    <div class="flex h-full overflow-y-auto">
      <ManualPageNavbar :state="state" class="hidden md:block" />
      <ClickAway
        @away="showNavbar = false"
        :extraElements="[mobileHeaderElement]"
      >
        <SlideLeft>
          <ManualPageNavbar
            v-show="showNavbar"
            :state="state"
            class="md:hidden block fixed z-20"
          />
        </SlideLeft>
      </ClickAway>

      <div
        ref="mainElement"
        class="overflow-y-auto w-full"
        @scroll="scrollObserver.apply(mainElement)"
      >
        <ManualPageMd v-if="state.link.path.endsWith('.md')" :state="state" />
        <ManualPageListing v-else :state="state" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, markRaw, onMounted } from "vue"
import { useMeta } from "vue-meta"
import { ManualState as State } from "./manual-state"
import * as ut from "../../ut"
import { ScrollObserver } from "../../ut/scroll-observer"

import SlideUp from "../../components/transitions/SlideUp.vue"
import SlideLeft from "../../components/transitions/SlideLeft.vue"
import ClickAway from "../../components/utilities/ClickAway.vue"
import ManualPageHeader from "./ManualPageHeader.vue"
import ManualPageNavbar from "./ManualPageNavbar.vue"
import ManualPageMd from "./ManualPageMd.vue"
import ManualPageListing from "./ManualPageListing.vue"

const props = defineProps<{ state: State }>()

const mainElement = ref<HTMLElement | null>(null)
const mobileHeaderElement = ref<ComponentPublicInstance | null>(null)

const scrollDirection = ref<"up" | "down">("up")
const showNavbar = ref<boolean>(false)

const scrollObserver = new ScrollObserver({
  delay: 150,
  handler: ({ scrollTopDelta }) => {
    if (scrollTopDelta > 0) {
      scrollDirection.value = "down"
    } else {
      scrollDirection.value = "up"
    }
  },
})

const meta = computed(() => {
  return {
    title: props.state.link.path
      ? props.state.title + " | " + props.state.subtitle
      : props.state.title,
  }
})

useMeta(meta)

watch(
  () => props.state.link.path,
  () => {
    window.scrollTo(0, 0)
  },
  { immediate: true }
)
</script>