.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