@mixin tangential-components-side_nav($theme) {

  $background : map-get($theme, background);
  $media-small-screen-width-break : 500px;
  $media-medium-screen-width-break : 1000px;
  $appBar : map-get($theme, app-bar);

  tanj-side-nav {
    width            : 25%;
    @media screen and (min-width : 100px) and (max-width : $media-small-screen-width-break) {
      width : 75%;
    }

    @media screen and (min-width : $media-small-screen-width-break) and (max-width : $media-medium-screen-width-break) {
      width : 50%;
    }
    position         : fixed;
    top              : map_get($appBar, height);
    bottom              : 0;
    left             : 0;
    max-height       : 100%;
    z-index          : 990;
    border-radius    : 4px;
    background-color : map-get($background, background);
    box-shadow       : .4em .4em .75em 0 rgba(0, 0, 0, 0.5);
  }

}