Attempting to create a basic admin panel using the Element UI library has presented me with a challenge.
The issue arises when the sidemenu is hidden, resulting in the content not occupying 100% of the space. To resolve this, I found that disabling menu animation and adjusting its width when collapsed using CSS like so:
aside.menu-collapsed {
width: 64px !important;
}
https://i.sstatic.net/01CRA.gif
This is how my layout appears:
Template:
<template>
<el-container>
<el-aside v-bind:class="[isCollapse ? 'menu-collapsed' : 'menu-expanded']">
<el-menu :router="true"
:default-active="$route.path"
:collapse="isCollapse"
:collapse-transition="true"
class="el-menu-vertical"
>
<template v-for="rule in routes">
:
:
</template>
</el-menu>
</el-aside>
<el-container>
<el-header height="100">
<span v-on:click="collapseSidebar()">
<i class="fas fa-bars"></i>
</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
Css:
<style>
.el-menu-vertical {
height: 100vh;
}
.el-menu-vertical:not(.el-menu--collapse) {
width: 100%;
}
.el-header {
background-color: #b4bbc1;
color: #333;
line-height: 56px;
}
</style>
Any suggestions on how to ensure the content width adjusts accordingly when collapsing the sidemenu?