tabler/scss/layout/_layout.scss

.topnav {
  border-bottom: 1px solid;
  background-color: $navbar-bg;
  border-color: $navbar-border-color;

  .navbar {
    margin: 0;
    padding: 0;
    min-height: $navbar-height;
  }
}



///**
//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;
//}