<template>
	<view class="navbar" :style="{'padding-top':`${statusBarHeight}px`,'background-color':bg}" :class="{'sticky':isSticky}">
		<slot></slot>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props: {
			isSticky: {
				type: Boolean,
				default: true
			},
			bg:{
				type: String,
				default: "#ffffff"
			}
		},
		setup() {
			let data = reactive({
				statusBarHeight: 24
			});
			const os = uni.getSystemInfoSync();
			data.statusBarHeight = os.statusBarHeight
			return {
				...toRefs(data),
			};
		},
	};
</script>

<style scoped>
	.navbar {
		height: 100rpx;
	}

	.sticky {
		position: sticky;
		top: 0;
		z-index: 999;
	}
</style>
