tabler/scss/layout/_mainnav.scss

@mixin navbar-vertical {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: $sidenav-width;
  z-index: $zindex-fixed;
  min-height: auto;
  align-items: start;

  > [class*="container"] {
    flex-direction: column;
    align-items: start;
  }

  ~ .navbar,
  ~ .content {
    margin-left: $sidenav-width;
  }

  .d-none-navbar-vertical {
    display: none;
  }

  .navbar-brand {
    display: flex;
    width: 100%;
    margin: 0;
    text-align: center;
    height: $navbar-height;
    align-items: center;
    justify-content: center;
  }

  &.navbar-vertical-narrow {
    width: $sidenav-width-narrow;

    .d-none-navbar-vertical-narrow {
      display: none;
    }

    .navbar-brand-logo-large {
      display: none;
    }

    .navbar-brand-logo-small {
      display: inline-block;
    }

    ~ .navbar,
    ~ .content {
      margin-left: $sidenav-width-narrow;
    }
  }

  &.navbar-right {
    left: auto;
    right: 0;

    ~ .navbar,
    ~ .content {
      margin-left: 0;
      margin-right: $sidenav-width;
    }

    &.navbar-vertical-narrow {
      ~ .navbar,
      ~ .content {
        margin-right: $sidenav-width-narrow;
      }
    }
  }
}

.page {
  display: flex;
  flex-direction: column;
}

.content {
  padding-top: map-get($spacers, 4);
  padding-bottom: map-get($spacers, 4);

  @include media-breakpoint-up(xl) {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

.navbar {
  min-height: $navbar-height;
  padding-top: 0; //todo: move to varaibles
  padding-bottom: 0;
}

/**
Navbar brand
 */
.navbar-brand {
  padding: 0; //todo: move to varaibles
}

.navbar-brand-logo {
  height: 2rem;
}

.navbar-brand-logo-small {
  display: none;
}

/**
Navbar colors
 */
.navbar-light {
  background: $white;
  box-shadow: 0 0 0 1px $border-color;
}

.navbar-dark {
  background: $sidenav-dark-bg;
  color: $sidenav-dark-color;

  .text-muted {
    color: inherit !important;
    opacity: $text-muted-opacity;
  }

  .navbar-brand-autodark {
    filter: brightness(0) invert(1);
  }
}

/**
Navbar vertical
 */
.navbar:not(.navbar-vertical) {
  .d-none-navbar-horizontal {
    display: none;
  }
}

.navbar-vertical {
  @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
    &.navbar-expand-#{$breakpoint} {
      @include media-breakpoint-up($breakpoint) {
        @include navbar-vertical;
      }

      @include media-breakpoint-down-than($breakpoint) {
        .d-none-navbar-horizontal {
          display: none;
        }
      }
    }
  }
}

/**
Navbar secondary
 */
.navbar-secondary {
  order: -1;
}