<template>
  <view :style="safeStyle">
    <slot />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const safeWidth = ref(0)

const safeStyle = computed(() => ({
  marginLeft: `${safeWidth.value}px`,
}))

onMounted(() => {
  try {
    const systemInfo = uni.getSystemInfoSync()
    const menuButton = uni.getMenuButtonBoundingClientRect()

    if (systemInfo.screenWidth && menuButton && menuButton.left != null) {
      safeWidth.value = systemInfo.screenWidth - menuButton.left + 8
    } else {
      safeWidth.value = Math.round(systemInfo.screenWidth * 0.28)
    }
  } catch (e) {
    try {
      const systemInfo = uni.getSystemInfoSync()
      safeWidth.value = Math.round(systemInfo.screenWidth * 0.28)
    } catch {
      safeWidth.value = 0
    }
  }
})
</script>
