forked from nikita/muzika-gromche
53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import ArrowBack from '@material-design-icons/svg/round/arrow_back_ios.svg'
|
|
import ArrowTop from '@material-design-icons/svg/round/keyboard_arrow_up.svg'
|
|
import { useHead } from '@unhead/vue'
|
|
import { computed } from 'vue'
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|
import { useScrollStore } from '@/store/ScrollStore'
|
|
import { useGlobalHeaderStore } from './GlobalHeaderStore'
|
|
|
|
const route = useRoute()
|
|
const arrowBackVisible = computed(() => {
|
|
return route.path !== '/'
|
|
})
|
|
|
|
const scrollStore = useScrollStore()
|
|
const headerStore = useGlobalHeaderStore()
|
|
useHead({
|
|
title: () => headerStore.titleWithDefault,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header class="tw:flex tw:flex-row tw:gap-4">
|
|
<RouterLink
|
|
v-if="arrowBackVisible" to="/"
|
|
class="header-button-back tw:flex-none tw:aspect-square tw:max-w-10 tw:flex tw:place-items-center tw:justify-center"
|
|
>
|
|
<ArrowBack class="tw:fill-current tw:w-10 tw:h-10" />
|
|
</RouterLink>
|
|
<h1 class="tw:flex-1 tw:p-2 tw:text-4xl tw:text-center">
|
|
{{ headerStore.title }}<span v-if="headerStore.hasTitle" class="tw:max-sm:hidden">{{ headerStore.default }}</span>
|
|
</h1>
|
|
<button
|
|
type="button" title="Scroll to Top"
|
|
class="tw:flex-none tw:aspect-square tw:max-w-10 tw:flex tw:place-items-center tw:justify-center tw:disabled:opacity-30 tw:transition-opacity"
|
|
:disabled="scrollStore.isAtTop" @click="scrollStore.scrollToTop"
|
|
>
|
|
<ArrowTop class="tw:fill-current tw:w-10 tw:h-10" />
|
|
</button>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
header {
|
|
background-color: var(--header-background-color);
|
|
border-bottom: var(--view-separator-border);
|
|
}
|
|
|
|
.header-button-back:any-link {
|
|
color: unset;
|
|
}
|
|
</style>
|