<template>
|
<div class="translate-navigation-bar" :style="barStyle">
|
<TransparentNavigationBar
|
v-bind="_commonNavigationBarProps"
|
:is-absolute="false"
|
mode="dark"
|
navigationArrowWhite
|
:style="{ opacity: 1 - rangeValue }"
|
>
|
</TransparentNavigationBar>
|
<CommonNavigationBar v-bind="_commonNavigationBarProps" :style="{ opacity: rangeValue }" />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { commonNavigationBarProps } from './commonNavigationBar';
|
import { useSystemStore } from '@/stores/modules/system';
|
import { CSSProperties } from 'vue';
|
import TransparentNavigationBar from './TransparentNavigationBar.vue';
|
import CommonNavigationBar from './CommonNavigationBar.vue';
|
import { usePickProps } from 'senin-mini/hooks';
|
|
defineOptions({
|
name: 'TranslateNavigationBar',
|
});
|
|
const systemStore = useSystemStore();
|
|
const props = defineProps({
|
...commonNavigationBarProps,
|
rangeValue: {
|
type: Number,
|
default: 0,
|
},
|
});
|
|
const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);
|
|
const barStyle = computed(() => {
|
return {
|
height: systemStore.navigationBarHeight + 'px',
|
} as CSSProperties;
|
});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.translate-navigation-bar {
|
position: relative;
|
|
.navigation-bar-wrapper {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
</style>
|
