Dalphi/dalphi

.sidebar {
  background-color: $color-3;
  bottom: 0;
  box-shadow: $sidebar-box-shadow;
  color: $color-1;
  height: 100%;
  left: -100%;
  padding: $container-padding;
  position: fixed;
  top: 0;
  transition: left $default-transition-duration;
  width: 100%;
  z-index: 10;

  @media (min-width: $sidebar-full-width-breakpoint) {
    width: $sidebar-xs-width;
  }

  @include media-breakpoint-up(sm) {
    left: -$sidebar-width;
    padding: $container-padding;
    width: $sidebar-width;
  }

  @include media-breakpoint-up(md) {
    left: 0;
  }

  &.expanded {
    left: 0;
  }

  > div {
    width: calc(100% - #{2 * $container-padding});
  }

  p {
    font-size: $small-font-size;
  }

  ul {
    list-style-type: none;
    padding: 0;

    li {
      margin: $sidebar-ul-li-margin;
    }
  }

  .header {
    margin-top: $default-margin;
    position: absolute;
    text-align: center;
    top: 0;

    .toggle-sidebar {
      color: $color-1;
      font-size: $sidebar-header-toggle-sidebar-font-size;
      margin-top: $sidebar-header-toggle-sidebar-margin-top;
      position: absolute;
      right: 0;
      top: 0;
    }

    .dalphi-logo {
      path {
        fill: $color-0;
      }
    }

    h1 {
      color: $color-0;
      margin-top: $sidebar-header-h1-margin-top;
    }
  }

  .footer {
    bottom: 0;
    font-size: $small-font-size;
    position: absolute;
    text-align: center;
  }

  .nav {
    margin: $sidebar-nav-margin;
    width: $sidebar-nav-width;

    li {
      margin: 0;
      text-align: left;
      text-transform: capitalize;

      a {
        color: $color-1;
        display: inline-block;
        padding: $sidebar-nav-li-a-padding;
        width: 100%;

        &:hover {
          color: $color-1;
        }
      }

      &.active {
        background-color: $color-3-2;
        border-left: $sidebar-nav-li-active-border-left;

        a {
          padding: $sidebar-nav-li-active-a-padding;
        }
      }

      &:hover {
        background-color: $color-3-1;
      }
    }
  }
}