<template>
	<view class="nav-bar-div" >
		<view class="nav-bar" v-if="is_fixed" :style="{ backgroundColor: backgroundColor }"></view>
		<view class="nav-bar-seat" v-if="is_seat" :style="{ backgroundColor: backgroundColor }"></view>
	</view>
</template>

<script setup>
	const props = defineProps({
		is_fixed: {
			type: Boolean,
			default: true
		},
		is_seat: {
			type: Boolean,
			default: true
		},
		backgroundColor: {
			type: String,
			default: 'transparent'
		}
	})
</script>

<style lang="scss" scoped>
	.nav-bar {
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
	}

	.nav-bar-seat {
		width: 100%;
		height: var(--status-bar-height);
	}

	.nav-bar-div {
		z-index: 1900;
		width: 100%;
		position: relative;
	}
</style>