侧边菜单的展开和折叠

环境准备：Vue3+Element-UI Plus

<script setup>
import {ref} from "vue";

// 是否折叠菜单，默认折叠
const isCollapse = ref(true)

</script>

<template>
  <el-container>
    <el-aside>
      <el-menu
          :collapse="isCollapse"
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location/>
            </el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon>
            <Menu/>
          </el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon>
            <document/>
          </el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <setting/>
          </el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-row align="middle" justify="space-between" style="height: 100%">
          <el-col :span="1" style="cursor: pointer">
            <el-icon v-show="isCollapse" @click="isCollapse=false">
              <Expand/>
            </el-icon>
            <el-icon v-show="!isCollapse" @click="isCollapse=true">
              <Fold/>
            </el-icon>
          </el-col>
          <el-col :span="1">
            <el-image class="avatar" src="/public/vite.svg"></el-image>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">
.el-container {
  .el-aside {
    background-color: slategrey;
    height: 100vh;
    width: auto;

    .el-menu {
      height: 100%;
      width: 100%;
    }
  }

  .el-container {
    .el-header {
      background-color: #ffffff;

      .avatar {
        border-radius: 50%;
        border: 1px solid #00ffff;
      }
    }

    .el-main {
      background-color: #efefef;
    }
  }
}
</style>