/*------------------------------------
- Sidebar
------------------------------------*/

.sidebar
  padding 30px 20px 20px


.sidenav

  &.nav > li > a
    padding 0

  &.nav > li > a:focus,
  &.nav > li > a:hover
    background-color transparent

  a:focus
    color $gray-text-color

  &,
  ul
    list-style none
    padding-left 0

  &.dropable ul
    display none

  &.dropable ul.open
    display block

  &.dropable a.active + ul,
  &.dropable .active > ul
    display block

  ul
    padding-left 24px

  a
    display block
    line-height 30px
    color $gray-text-color
    transition .3s ease
    
    &.active,
    &:hover
      text-decoration none
      opacity 1
      color $brand-primary
    
    &.active
      font-weight 400

  > li > a
    font-size 16px
    line-height 36px
    
    &.active,
    &:hover
      color $brand-primary
    
  > li
    position relative
    font-size 16px
    line-height 36px
    color $text-color

    > ul
      padding-bottom 20px

      &.nav > li > a
        padding 0
      
      &.nav > li > a:focus,
      &.nav > li > a:hover
        background-color transparent
      
      &:before
        content ''
        position absolute
        top 36px
        bottom 20px
        left 0
        border-left 1px solid $gray-lighter
      
      
      li.active a,
      a.active
        position relative
        
        &:before
          content ' '
          position absolute
          left -26px
          top 12px
          width 6px
          height 6px
          border-radius 100%
          background-color $brand-primary
        
      
    

    li
      font-size 14px
      line-height 30px
    
  
  
  .fa,
  .glyphicon
    margin-right 4px

  // Scrollspy
  li.active > a
    color $brand-primary




//
// Variations
//
// Line beside active link
.sidebar-line .sidenav

  > li > ul:before
    display none

  li.active > a,
  a.active
    position relative

    &:before
      content ' '
      position absolute
      left -10px
      top 5px
      bottom 5px
      width 1px
      height 20px
      border-radius 0
      background-color $brand-primary
    
  

  > li.active > a:before,
  > li > a.a:before
    height 25px
    width 2px



// Icon
.sidebar-icon .sidenav

  > li > ul:before,
  li.active a:before,
  a.a:before
    display none

@media screen and (max-width 767px)

  .sidebar
    position fixed
    top 0
    bottom 0
    width 80% !important
    height 100%
    left -80% !important
    padding-left 25px
    padding-top 20px !important
    overflow-y auto
    background-color $bg-color !important
    transition left .25s ease-out
    
  .sidenav.dropable ul
    display block

  .open-sidebar
    overflow hidden

    .site-header
      left 80%

      .navbar
        left 80% !important
        right -80% !important
  
  .sidenav
    
    > li
      position static

      &.active a:before
        display none
      
  
      > ul
        a.active
          position static
        
      
    
    
  

