I am trying to hide side menu bar except for the hamburger icon when "expanded". I tried removing some parts of the css but am still unable to hide the little side menu bar.

The links are the images is the results of the menu: pre-expand-menu expanded-menu

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>

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>