mdb-ui-kit/scss/_drawer.scss

// Drawer.
.mdb-layout-drawer {
  position: absolute;
  z-index: 5; // over a header and content
  box-sizing: border-box;
  display: flex;
  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.
// These should definitely be passed in as args: $mdb-layout-drawer-x-overlay-breakpoint, $mdb-layout-drawer-size

// for left or right drawers, setup widths, heights and positions
@each $side in (left right) {
  .mdb-drawer-fixed-#{$side} {
    > .mdb-layout-drawer {
      // position
      top: 0;
      #{$side}: 0;

      width: $mdb-layout-drawer-size;
      height: 100%;

      @if $side == left {
        transform: translateX(-$mdb-layout-drawer-size - 10px); // initial position of drawer (closed), way off screen
      } @else {
        transform: translateX($mdb-layout-drawer-size + 10px); // initial position of drawer (closed), way off screen
      }
    }

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

// for top or bottom drawers, setup widths, heights and positions
@each $side in (top bottom) {
  .mdb-drawer-fixed-#{$side} { // style to force closed in all responsive cases
    > .mdb-layout-drawer {
      // position
      #{$side}: 0;
      left: 0;

      width: 100%;
      height: $mdb-layout-drawer-size;

      @if $side == top {
        transform: translateY(-$mdb-layout-drawer-size - 10px); // initial position of drawer (closed), way off screen
      } @else {
        transform: translateY($mdb-layout-drawer-size + 10px); // initial position of drawer (closed), way off screen
      }
    }

    > .mdb-layout-content {
      margin-#{$side}: 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-closed
//  Note that this also makes a provision for mdb-drawer-closed, a marker class that will _force_ the drawer closed,
//  regardless of the responsive class present. If (for some strange reason) both mdb-drawer-closed and mdb-drawer-open
//  are present, it appears that the closed option wins.
//
.mdb-drawer-open {
  @each $breakpoint in map-keys($grid-breakpoints) {

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

    // e.g. &, &-sm, &-md, &-lg
    #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg

      @include media-breakpoint-up($breakpoint) {

        // mdb-drawer-fixed-(left and right) styles
        @each $side in (left right) {

          &.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {

            // 1. Push - drawer will push the header and content (default behavior)
            &,
            &.mdb-drawer-push {
              > .mdb-layout-header {
                width: calc(100% - #{$mdb-layout-drawer-size});
                margin-#{$side}: $mdb-layout-drawer-size;
              }

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

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

            // 2. Overlay - drawer will overlay content/header at the pre-configured breakpoint OR if marked as mdb-drawer-overlay
            @include media-breakpoint-down-or($mdb-layout-drawer-x-overlay-breakpoint, "&.mdb-drawer-overlay") {
              > .mdb-layout-header,
              > .mdb-layout-content {
                width: 100%;
                margin-#{$side}: 0;
                overflow: hidden;
              }
            }
          }
        }
      }



      // top bottom
      #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg

        // mdb-drawer-fixed-(top and bottom) styles
        @each $side in (top bottom) {

          &.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {

            // 1. Push - drawer will push the header or content
            > .mdb-layout-header {
              //height: calc(100% - #{$mdb-layout-drawer-size});
              @if $side == top { // only add margin-top on a header when the drawer is at the top
                margin-#{$side}: $mdb-layout-drawer-size;
              }
            }

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

            > .mdb-layout-content {
              @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
                margin-#{$side}: $mdb-layout-drawer-size;
              }
            }
          }
        }
      }
    }
  }
}