59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
|
<!--
|
||
|
|
Ported from legacy henza_pwa/src/components/appHeader.vue.
|
||
|
|
NOTE (existing issue, ported as-is per instructions — not fixed here):
|
||
|
|
the header's id is "" (empty) but onEnter() looks up getElementById('appHeader').
|
||
|
|
That lookup always returns null, so onEnter() never actually sets the header
|
||
|
|
height from this code path in practice. Preserved exactly; flagged separately.
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<transition name="shutter">
|
||
|
|
<header
|
||
|
|
id=""
|
||
|
|
class="overflow-hidden bg-[#1C2D56] rounded-bl-[32px] p-[20px] pl-[30px] w-full mb-[0px] z-10"
|
||
|
|
v-if="transition.transitionFlag"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</header>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onBeforeUnmount, onMounted } from 'vue'
|
||
|
|
import { useTransitionStore } from '../stores/transitionStore'
|
||
|
|
|
||
|
|
const transition = useTransitionStore()
|
||
|
|
|
||
|
|
function onEnter() {
|
||
|
|
const element = document.getElementById('appHeader')
|
||
|
|
if (element && element.offsetHeight) {
|
||
|
|
element.style.position = 'fixed'
|
||
|
|
element.style.top = '0'
|
||
|
|
transition.setHeaderHeight(element.offsetHeight + 16)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onBeforeLeave() {
|
||
|
|
if (transition.headerHeight > 0) transition.setHeaderHeight(0)
|
||
|
|
}
|
||
|
|
onBeforeUnmount(() => onBeforeLeave())
|
||
|
|
onMounted(() => {
|
||
|
|
setTimeout(() => onEnter(), 1000)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.shutter-enter-active {
|
||
|
|
animation: shutter 1s cubic-bezier(0.33, 1, 0.68, 1);
|
||
|
|
}
|
||
|
|
@keyframes shutter {
|
||
|
|
0% {
|
||
|
|
max-height: 0;
|
||
|
|
opacity: 0;
|
||
|
|
color: transparent !important;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
max-height: 120px;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|