<template>
	<view class="customize">
		<view class="navbar">
			<view class="navbar-t" :style="{height:statusBarHeight+'px'}">
			</view>
			<view class="navbar-b" :style="{height:navBarHeight+'px',marginLeft:leftIconWidth+'px'}">
				<slot name="navbar-content"></slot>
			</view>
		</view>
		<view class="fill" :style="{height:fillHeight+'px'}">
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// const props = defineProps({
	// 	title: {
	// 		type: String,
	// 		default: '首页'
	// 	}
	// })
	const leftIconWidth = ref(0)
	const navBarHeight = ref(0)
	// 获取系统信息
	const {statusBarHeight} = uni.getSystemInfoSync()
	// 获取胶囊按钮信息
	// #ifndef MP-ALIPAY || H5
	const {top, height} = uni.getMenuButtonBoundingClientRect()
	// 计算导航栏高度
    navBarHeight.value = (top - statusBarHeight) *2 + height
	// #endif	
	// 计算填充高度
	const fillHeight = statusBarHeight + navBarHeight.value
	
</script>

<style lang="scss" scoped>
	.customize {
    .navbar{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
			.navbar-t{
			}
			.navbar-b{
				display: flex;
				align-items: center;
				padding: 0 35rpx;
			}
		}
	}
</style>