<template>
  <view class="nav-bar" :style="`height: {{navBarHeight}}px; backgroundColor: {{bgColor}};`">
    <view
      class="container"
      :style="`height: {{containerHeight}}px; marginTop: {{containerMargin}}px;`"
    >
      <!-- containerMargin{{ (containerHeight, containerHeight, containerMargin) }} -->
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const navBarHeight = ref(0);
const containerHeight = ref(0);
const containerMargin = ref(0);
const bgColor = ref('');

onMounted(() => {
  const capsuleButtonInfo = xma.getMenuButtonBoundingClientRect();
  const systemInfo = xma.getSystemInfoSync();
  const gap = capsuleButtonInfo.top - systemInfo.statusBarHeight;
  navBarHeight.value = gap * 2 + capsuleButtonInfo.height + systemInfo.statusBarHeight;
  containerHeight.value = capsuleButtonInfo.height;
  containerMargin.value = capsuleButtonInfo.top;
});
</script>

<style lang="scss" scoped>
.nav-bar {
  position: sticky;
  top: 0rpx;
  z-index: 999;
  width: 750rpx;
  overflow: hidden;

  transition: background-color 0.5s;

  .container {
    width: 750rpx;
    display: flex;
  }
}
</style>
