Estoy tratando de ocultar la barra de menú lateral, excepto el ícono de hamburguesa cuando está "expandido". Intenté eliminar algunas partes del css pero aún no puedo ocultar la pequeña barra de menú lateral.

Los enlaces son las imágenes son los resultados del menú: pre-expand-menu expandido-menú

plantillas:

 <div class="menu" :class="{ 'small-menu': smallMenu }"> <MenuItem v-for="(item, index) in menuTree" :key="index" :data="item.children" :label="item.label" :depth="0" :smallMenu="smallMenu" /> <i @click="smallMenu = !smallMenu" class="material-icons">menu</i> </div>

estilos:

 <style lang="scss" scoped> .menu { background: grey; position: fixed; height: 100vh; width: 240px; left: 110; top: 0; border-right: 1px solid #ececec; transition: all 0.3s ease; overflow: auto; padding-top: 50px; i { position: fixed; left: 250px; font-size: 20px; top: 15px; user-select: none; cursor: pointer; transition: all 0.3s ease; } &.small-menu { overflow: inherit; width: 60px; padding-top: 50px; i { left: 20px; } } } </style>