$side-menu-width: 222px
.side-menu
  background-color: #444
  position: fixed
  //display: none
  left: -$side-menu-width
  top: 0
  width: $side-menu-width
  height: 100%
  z-index: 157
  opacity: 0.9
  border-right: 2px solid black
  &.active
    left: 0
    animation-name: sideMenuActive
    animation-duration: 0.5s
    .toggle-side-menu
      right: 5px
  &.closed
    &.clicked
      animation-name: sideMenuClosed
      animation-duration: 0.3s
  > ul
    list-style: none
    a
      color: white
    li
      margin-bottom: 11px
      font-size: 1.2em
      &.title
        border-bottom: 1px solid #aaa
  h3
    color: white
    margin-bottom: 3px
  .scan-qr-icon
    margin-right: 18px
    @extend .fa
    @extend .fa-qrcode
  .fa-glass
    margin-right: 5px
  .active-list-icon
    margin-right: 18px
    @extend .fa
    @extend .fa-list
  .icon.settings
    margin-right: 18px
  .icon.lists
    margin-right: 18px
  .about-mozo-icon
    margin-right: 18px
    @extend .fa
    @extend .fa-info-circle
  a.active
    color: $current-color

  .toggle-side-menu
    position: absolute
    width: 28px
    height: 28px
    color: white
    right: -30px
    cursor: pointer
    //z-index: 158
    font-size: 1.6em
    span
      @extend .fa
      @extend .fa-lg
      @extend .fa-bars

@keyframes(sideMenuActive)
  from
    left: -$side-menu-width
  to
    left: 0
@keyframes(sideMenuClosed)
  from
    left: 0
  to
    left: -$side-menu-width