mdb-ui-kit/scss/_drawer.scss

// .mdb-drawer-fixed-left is a marker that both header and content respond to.

//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!

// Drawer.
.mdb-layout-drawer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  max-height: 100%;

  flex-direction: column;
  flex-wrap: nowrap;
  overflow: visible;
  overflow-y: auto;
  color: $mdb-layout-drawer-text-color;
  background: $mdb-layout-drawer-bg-color;

  // Transform offscreen.
  transition: transform;
  will-change: transform;
  transform-style: preserve-3d;

  @include shadow-2dp();
  @include material-animation-default();

  > * {
    flex-shrink: 0;
  }

  .mdl-navigation {
    flex-direction: column;
    align-items: stretch;
    padding-top: 1rem;
  }
}

// FIXME: the below needs to happen if it is the right size OR if the drawer is visible.  Need to look at collapse or collapseInline to see if it can help us here.

.mdb-drawer-fixed-left {

  // Responsive Header
  > .mdb-layout-header {
    @include media-breakpoint-up(lg) {
      width: calc(100% - #{$mdb-layout-drawer-sm});
      margin-left: $mdb-layout-drawer-sm;
    }
  }

  // Responsive Drawer Width
  > .mdb-layout-drawer {
    width: $mdb-layout-drawer-sm;
    transform: translateX(-$mdb-layout-drawer-sm - 10px); // initially way off screen

    //&.is-visible {
    //  transform: translateX(0);
    //  ~ .mdb-layout-content.mdb-layout-content {
    //    overflow: hidden;
    //  }
    //}

    @include media-breakpoint-up(lg) {
      transform: translateX(0);
    }
  }

  // Responsive Content with fixed drawer
  > .mdb-layout-content {
    margin-left: 0;

    @include media-breakpoint-up(lg) {
      margin-left: $mdb-layout-drawer-sm;
    }
  }
}