slibra-official-web/components/TheDrawer.vue

<script setup lang="ts">
const modelValue = defineModel<boolean>();

const handlerCloseDrawer = () => {
  modelValue.value = false;
};
</script>

<template>
  <n-drawer v-model:show="modelValue" placement="right" default-width="100%">
    <n-drawer-content
      :body-style="{ padding: 0 }" 
      :body-content-style="{ padding: 0 }"
      :footer-style="{background: '#fff', borderColor: '#eee'}"
    >
      <div class="menu-container">
        <ul class="logo-content">
          <li>
            <BaseIcon name="logo3" width="87" height="34" />
          </li>
          <li class="close-x" @click="handlerCloseDrawer">
          </li>
        </ul>
        <BaseMenu mode="vertical" @on-menu-item="() => modelValue = false "></BaseMenu>
      </div>
      <template #footer>
        <ul class="drawer-footer">
          <li>
            010-63366692
          </li>
          <li>
            <BaseLang></BaseLang>
          </li>
        </ul>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped lang="scss">
$closeXSize: 20px; 
$closeXLine: 2px;

.menu-container {
  height: 100%;
  // background: #1e2534;
  background: #fff;

  .logo-content {
    @include flex(x, center, between);
    height: 60px;
    padding: 0 10px;

    .img {
      width: 89px;
      height: 36px;
    }

    .close-x {
      position: relative;
      display: inline-block;
      width: $closeXSize;
      height: $closeXSize;
      cursor: pointer;

      &::before,
      &::after {
        position: absolute;
        left: 50%;
        width: 2px;
        height: 100%;
        margin-left: 1px;
        content: ' ';
        transform: rotate(-45deg);
        background: #1e2534;
      }

      &::after {
        transform: rotate(45deg);
      }
    }
  }
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #161616;
}  
</style>