<script lang="ts" setup>
const props = withDefaults(defineProps<{
  title?: string;
  fixed?: boolean
  showLeft?: boolean
  customClass?: string
}>(), {
  fixed: true,
  showLeft: true
});

function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <wd-navbar
      :bordered="false"
      :custom-class="props.customClass"
      :fixed="props.fixed"
      :placeholder="props.fixed"
      :title="props.title"
      safeAreaInsetTop
      @click-left="handleClickLeft">
    <template #left>
      <view v-if="showLeft" class="shrink-0">
        <view class="i-carbon:chevron-left text-50rpx text-primary ml-[-10rpx]"></view>
      </view>
    </template>
    <template #right>
      <slot name="right"></slot>
    </template>
  </wd-navbar>
</template>

<style lang="scss" scoped>
:deep(.wd-navbar) {
  z-index: 2 !important;
}
</style>
