tracim_v2/src/css/Sidebar.styl

.sidebar-expandbar
  position absolute
  left 0
  display none
  border 1px solid darkBlue
  border-top-width 2px
  padding 11px 15px
  background-color blue
  z-index 2
  &__icon
    font-size 18px
    text-align center
    cursor pointer
    &:hover
      color white

/**** MENU HAMBURGER ON EXPAND BAR *****/

.hamburger--spring .hamburger-inner
  margin 4px 8px

.hamburger--spring .hamburger-inner::before
  top 7px

.hamburger--spring .hamburger-inner::after
  top 14px

 /***************************************/

.sidebar
  min-height 100%
  background-color secondColor
  z-index 1

sidebar-width = 300px
sidebar-animate-speed = 0.5s

leftside()
  flex-grow 0
  height 100%
  font-size 18px
  background-color rgba(253, 253, 253, 0.3)

.sidebar
  position relative
  transition all sidebar-animate-speed
  width sidebar-width
  &.sidebarclose
    width 0
    .hamburger--spring
      .hamburger-inner
        transition-delay 0.22s
        background-color transparent
        &::before
            top -3px
            transition top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
            transform translate3d(0, 10px, 0) rotate(45deg)
        &::after
            top -3px
            transition top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
            transform translate3d(0, 10px, 0) rotate(-45deg)
  &__expand
    position absolute
    top 0
    right -49px
    padding 4px
    border-left 1px solid off-white
    border-bottom-right-radius 15px
    cursor pointer
    background-color blue
    color white
    transition all sidebar-animate-speed
    &__btnHamburger
      padding 0
      &:focus
        outline none
      &__box
        &__icon, &__icon::before, &__icon::after
          width 20px
          height 2px
          background-color off-white
        &__icon::before
          top 8px
        &__icon::after
          top 16px
  &__btnnewworkspace
    margin 50px 0
    overflow hidden
    &__btn
      display block
      margin 0 auto
      padding 15px 30px
  &__navigation
    padding 0
    overflow hidden
    &__workspace
      padding-left 0
      list-style none
      &__item
        &__wrapper
          display flex
          align-items center
          border-bottom 1px solid darkBlue
          width 100%
          height 100%
          background-color blue
          cursor pointer
        &__number
          leftside()
          padding 12px
          min-width 50px
          letter-spacing 2px
        &__name
          flex-grow 2
          padding 10px
          font-size 20px
          color off-white
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
        &__icon
          flex-grow 0
          padding 10px
          color white
        &__submenu
          margin 0
          padding 0
          width 100%
          background-color fourthColor
          overflow hidden
          &__dropdown
            display flex
            align-items center
            border-top 1px solid darkBlue
            cursor pointer
            &:nth-last-child(1)
              border-bottom 1px solid darkBlue
            &:hover
              background-color lightBlue
            &__showdropdown
              display flex
              justify-content space-between
              align-items center
              padding 0 10px
              width 100%
            .dropdown__icon
              padding 10px 15px
              min-width 50px
              leftside()
            &.activeFilter
              .dropdown__icon
                background-color rgba(253, 253, 253, 0.8)

/***** MEDIA 576px and 991px ******/

@media (min-width: min-sm) and (max-width: max-md)

  .sidebar
    position absolute

/***** MEDIA 576px and 767px *****/

@media (min-width: min-sm) and (max-width: max-sm)

  .sidebarpagecontainer
    padding-top 69px

/***** MEDIA  *****/

@media (max-width: 575px)

  .sidebarpagecontainer
    padding-top 69px

  .sidebar
    position absolute