I've been attempting to conceal the side menu bar, with the exception of the hamburger icon when in the "expanded" state. Despite my efforts to modify the CSS code, I am still struggling to hide the small side menu bar.
The following images represent the menu's pre-expanded and expanded states: pre-expand-menu expanded-menu
Here are the templates:
<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>
And the styles:
<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>