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;
  z-index: 5; // over a header and content
  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;
  }
}

//----------------
// Sizing and positioning below here
//
// TODO create a mixin for the below that can generate a named set of styles so that you can use multiple drawer sizes i.e. something like mdb-layout-drawer-100, mdb-drawer-fixed-right-100, etc.

.mdb-layout-drawer {
  width: $mdb-layout-drawer-width;
}

.mdb-drawer-fixed-left {
  > .mdb-layout-drawer {
    left: 0;
    transform: translateX(-$mdb-layout-drawer-width - 10px); // initial position of drawer (closed), way off screen
  }

  > .mdb-layout-content {
    margin-left: 0;
  }
}

.mdb-drawer-fixed-right {
  > .mdb-layout-drawer {
    right: 0;
    transform: translateX($mdb-layout-drawer-width + 10px); // initial position of drawer (closed), way off screen
  }

  > .mdb-layout-content {
    margin-right: 0;
  }
}

// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-open')), as well
//  as responsive sizes (i.e. mdb-drawer-open-md will open once the browser is wider than 768px).
//
// To create these, we need iterate over the standard grid breakpoints, but we also need styles for the simpler
//  `mdb-drawer-open` without a size (for triggered openings).  Since the xs size is 0,
//  instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open` a.k.a always open.
//  Therefore, this will generate: mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
.mdb-drawer-open {
  @each $breakpoint in map-keys($grid-breakpoints) {

    $name: "&-#{$breakpoint}";
    @if $breakpoint == xs {
      $name: "&";
    }

    // e.g. &, &-sm, &-md, &-lg
    #{unquote($name)} {
      @include media-breakpoint-up($breakpoint) {

        // mdb-drawer-fixed-(left and right) styles
        @each $side in (left right) {
          &.mdb-drawer-fixed-#{$side} {
            > .mdb-layout-header {
              width: calc(100% - #{$mdb-layout-drawer-width});
              margin-#{$side}: $mdb-layout-drawer-width;
            }

            > .mdb-layout-drawer {
              transform: translateX(0);
            }

            > .mdb-layout-content {
              margin-#{$side}: $mdb-layout-drawer-width;
            }
          }
        }
      }
    }
  }
}