<template>
  <div class="md:hidden block">
    <input ref="checkboxRef" id="checkbox" type="checkbox" />
    <label class="toggle" for="checkbox" @click="drawer = !drawer">
      <div id="bar1" class="bars"></div>
      <div id="bar2" class="bars"></div>
      <div id="bar3" class="bars"></div>
    </label>
  </div>
  <el-drawer
    v-model="drawer"
    :with-header="false"
    direction="ltr"
    :append-to-body="true"
    :lock-scroll="true"
    size="266"
    custom-class="drawer-sidebar"
    @close="onClose"
  >
    <AppSidebar />
  </el-drawer>
</template>
<script setup>
const drawer = ref(false);
const checkboxRef = ref(null);

// 关闭弹出框
function onClose() {
  checkboxRef.value.checked = false;
  drawer.value = false;
}

onMounted(() => {
  // 获取复选框元素
  checkboxRef.value = document.getElementById("checkbox");
});
</script>

<style scoped>
/* From Uiverse.io by Yaya12085 */
#checkbox {
  display: none;
}
.toggle {
  position: relative;
  width: 35px;
  height: 35px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  transition-duration: 0.5s;
}

.bars {
  width: 100%;
  height: 4px;
  background-color: rgb(92, 130, 255);
  border-radius: 4px;
}

#bar2 {
  transition-duration: 0.8s;
}

#bar1 {
  width: 50%;
}

#bar2 {
  width: 75%;
}

#checkbox:checked + .toggle .bars {
  position: absolute;
  transition-duration: 0.5s;
}

#checkbox:checked + .toggle #bar2 {
  transform: scaleX(0);
  transition-duration: 0.1s;
}

#checkbox:checked + .toggle #bar1 {
  width: 100%;
  transform: rotate(45deg);
  transition-duration: 0.5s;
}

#checkbox:checked + .toggle #bar3 {
  width: 100%;
  transform: rotate(-45deg);
  transition-duration: 0.5s;
}

#checkbox:checked + .toggle {
  transition-duration: 0.5s;
  transform: rotate(180deg);
}
</style>