talos/docs/website/components/Header.vue
Andrew Rynhard 17093416e6 docs: add FAQs page
The FAQs should be pulled out from the documentation as they are
specific to a version of Talos and more of a marketing message. This
adds a dedicated page for the FAQs.

Signed-off-by: Andrew Rynhard <andrew@andrewrynhard.com>
2019-10-19 19:26:30 -07:00

55 lines
1.3 KiB
Vue

<template>
<header id="header" class="flex">
<div
class="flex flex-wrap items-center justify-start max-w-6xl mx-auto py-6"
>
<Logo></Logo>
</div>
<div class="flex flex-wrap items-center justify-end max-w-6xl mx-auto py-6">
<DocumentationDropdown></DocumentationDropdown>
<CommunityDropdown></CommunityDropdown>
<a href="/faqs">
<span class="font-semibold mr-1">FAQs</span>
</a>
</div>
</header>
</template>
<script>
import Logo from '~/components/Logo.vue'
import DocumentationDropdown from '~/components/DocumentationDropdown.vue'
import CommunityDropdown from '~/components/CommunityDropdown.vue'
export default {
name: 'Header',
components: {
Logo,
DocumentationDropdown,
CommunityDropdown
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop
const shrinkOn = 240
const shrinkOff = 140
const headerEl = document.getElementById('header')
if (distanceY > shrinkOn) {
headerEl.classList.add('scrolled')
} else if (distanceY < shrinkOff) {
headerEl.classList.remove('scrolled')
}
}
}
}
</script>