<template>
|
<div
|
:class="[
|
'navigation-bar-wrapper',
|
{ active: props.mode === 'dark', plain: props.plain, hasBorder: props.hasBorder },
|
]"
|
>
|
<slot></slot>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { navigationBarProps } from './navBar';
|
import { CSSProperties } from 'vue';
|
import { useAppStore } from '@/store/modules/app';
|
|
defineOptions({
|
name: 'NavBar',
|
});
|
|
const props = defineProps(navigationBarProps);
|
|
const appStore = useAppStore();
|
|
// const barStyle = computed(
|
// () =>
|
// ({
|
// paddingTop: appStore.statusBarHeight / 2 + 'px',
|
// } as CSSProperties)
|
// );
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.navigation-bar-wrapper {
|
position: relative;
|
z-index: 10;
|
display: flex;
|
padding-top: constant(safe-area-inset-top);
|
padding-top: env(safe-area-inset-top);
|
background-color: #ffffff;
|
|
&.plain {
|
border-bottom-left-radius: 10px;
|
border-bottom-right-radius: 10px;
|
}
|
|
&.active {
|
background-color: getCssVar('color', 'primary');
|
}
|
|
&.hasBorder {
|
border-bottom: 1px solid #f6f6f6;
|
}
|
}
|
</style>
|
