dl_site_nuxt/components/menu-drawer.vue

<template>
  <el-drawer
    :visible.sync="drawer"
    direction="ltr"
    :with-header="false"
    size="50%"
  >
    <div class="p-4">
      <img class="mb-3" src="../assets/image/mob-logo.png" alt="logo" />
      <el-tree
        :data="menuTree"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
        :props="{
          children: 'children',
          label: 'label'
        }"
      />
    </div>
  </el-drawer>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'MenuDrawer',
  data() {
    return {
      drawer: false,
    }
  },
  computed: {
    ...mapState(['menuTree'])
  },
  methods: {
    handleNodeClick(data) {
      if (data.to) {
        this.$router.push(data.to)
        this.drawer = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .is-current {
  > .el-tree-node__content {
    color: #015fe8;
  }
}

</style>