el-aside中添加el-menu设置collapse宽度自适应

    根据vue3官方提供的命令行创建项目后，引入element-plus后，尝试通过Container布局容器创建一个简单布局后，在<el-aside>引入<el-menu>后设置collapse为true，<el-menu>进行了折叠，但是<el-aside>并没有折叠，源代码如下：

<script setup lang="ts">
import { ref } from 'vue'
import { Bell, Open, TurnOff, Menu as IconMenu } from '@element-plus/icons-vue'
//el-menu是否水平折叠
const isCollapse = ref(false)

//点击el-icon
const turnCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<template>
  <div class="common-layout">
    <!-- container布局容器 -->
    <el-container class="app-el-container">
      <!-- 左侧树形菜单布局容器 -->
      <el-aside>
        <!-- 树形菜单 -->
        <el-menu
          default-active="1"
          :collapse="isCollapse"
        >
          <el-menu-item index="1">
            <el-icon>
              <Bell />
            </el-icon>
            <span>菜单1</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon>
              <icon-menu />
            </el-icon>
            <span>菜单2</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧布局包含el-header、el-main、el-footer -->
      <el-container>
        <el-header>
          <!-- 按钮用于控制左侧树形菜单是否水平折叠 -->
          <el-icon
            :size="50"
            @click="turnCollapse"
          >
            &