<template>
  <div
    class="h-50 bg-white justify-between w-full fixed z-[999] border-b box-border"
  >
    <NuxtLink to="/" class="absolute top-1/2 -translate-y-1/2 left-15">
      <img src="~/assets/img/logo.png" class="h-36 object-contain" />
    </NuxtLink>
    <div
      class="absolute right-15 top-1/2 -translate-y-1/2"
      @click="handleClickMenu"
    >
      <span class="iconfont icon-menu" style="font-size: 24px"></span>
    </div>

    <van-popup
      v-model:show="isMenuShow"
      position="left"
      :style="{ height: '100%', width: '70%' }"
    >
      <NavigationBarLeftMenu
        v-if="isMenuShow"
        v-model:visible="isMenuShow"
        @on-hide="isMenuShow = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
const isMenuShow = ref(false);

function handleClickMenu() {
  isMenuShow.value = true;
}

const route = useRoute();
</script>

<style lang="scss" scoped></style>
