_layout.scss

/**
Layout
 */
@mixin menu-side {
  align-items: flex-start;
}

@mixin menu-collapsed {
  .layout-area-menu {
    position: fixed;
    left: -($sidenav-width);
    top: 0;
    bottom: 0;
    background: $dark;
    color: $white;
    width: $sidenav-width;
    z-index: $zindex-fixed;
    transition: .3s left;

    @include menu-side;
  }

  .layout-area-menu-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: rgba($dark, .1);
    z-index: $zindex-fixed - 1;
    visibility: hidden;
    opacity: 0;
  }

  .layout-toggler {
    display: block;
  }

  @at-root body.aside-visible & {
    .layout-area-menu {
      left: 0;
    }

    .layout-area-menu-backdrop {
      opacity: 1;
      visibility: visible;
    }
  }
}

.layout {
  position: relative;
  display: grid;

  grid-template: "head" auto "menu" auto "main" auto /
    100%;
}

.layout-collapsed {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint);

    @if $infix != '' {
      @include media-breakpoint-down($breakpoint) {

        &#{$infix} {
          @include menu-collapsed;
        }
      }
    } @else {
      @include menu-collapsed;
    }
  }
}

.layout-sidebar {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint);

    @include media-breakpoint-up($breakpoint) {
      .layout-toggler {
        display: none;
      }

      &#{$infix} {
        grid-template: "menu head" auto "menu main" auto /
          auto 1fr;

        .layout-area-menu {
          width: $sidenav-width;
        }
      }

      &-folded#{$infix} {
        grid-template: "menu head" auto "menu main" auto /
          auto 1fr;

        .layout-area-menu {
          width: $sidenav-folded-width;
        }
      }
    }
  }
}

.layout-toggler {
  display: none;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  position: relative;
  opacity: .8;

  &-icon {
    top: 50%;
    left: 50%;
    display: block;
    margin-top: -2px;
    margin-left: -.75rem;

    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
    transition-duration: 75ms;

    &,
    &:after,
    &:before {
      content: '';
      width: 1.5rem;
      height: 2px;
      background: currentColor;
      position: absolute;
      border-radius: 4px;
    }

    &:before {
      top: -.5rem;
      transition: top 75ms ease .12s, opacity 75ms ease;
    }

    &:after {
      bottom: -.5rem;
      transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
    }

    @at-root body.aside-visible & {
      transform: rotate(45deg);
      transition-delay: .12s;
      transition-timing-function: cubic-bezier(.215, .61, .355, 1);

      &:before {
        top: 0;
        transition: top 75ms ease, opacity 75ms ease .12s;
        opacity: 0;
      }

      &:after {
        bottom: 0;
        transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
        transform: rotate(-90deg);
      }
    }
  }
}

.layout-area-topnav {
  grid-area: head;
  padding-left: 0;
  padding-right: 0;
}

.layout-area-menu {
  grid-area: menu;
}

.layout-area-menu-backdrop {
  display: none;
}

.layout-area-main {
  grid-area: main;
}