iolovolio/components/header/header.scss

@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-header {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  height: $header-height-mobile;
  width: 100%;
  background: $olive;
  color: $white;

  .hamburger {
    display: flex;
    margin-right: 20px;
  }

  .menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;

    .item {
      display: flex;
      color: $white;
      margin: auto 20px;
      font-size: $font-20;
      letter-spacing: 2px;

      .label {
        color: $white;
      }

      &.active {
        border-bottom: 2px solid $white;
      }

      &.disabled {
        .label {
          color: $white-alpha;
        }
      }
    }
  }

  .sidebar-menu {
    position: fixed;
    top: $header-height-mobile;
    left: 0;
    height: calc(100vh - #{$header-height-mobile});
    background: $olive;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    transform: translateX(-100%);
    transition: transform .3s;

    .item {
      display: block;
      color: $white;
      margin: 20px;
      font-size: $font-20;
      letter-spacing: 2px;
      padding: 20px;
      border-bottom: 1px dotted $gray;

      .label {
        color: $white;
      }

      &.active {
        //border-bottom: 2px solid $white;
      }

      &.disabled {
        .label {
          color: $white-alpha;
        }
      }
    }

    &.active {
      transform: translateX(0%);
    }
  }
}




@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-header {
    height: $header-height;

    .menu {
      display: flex;
    }

    .sidebar-menu {
      top: $header-height;
      height: calc(100vh - #{$header-height});
    }
  }
}