.container {
  @include container;
}

header {
  @include full;
}

aside {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 20em;
  // IE10+:
  // left: 0;
  // transform: translate3d(-100%, 0, 0);
  // transition: transform 0.5s;

  // IE9+:
  left: -20em;
  transition: left 0.5s;

  // See https://css-tricks.com/off-canvas-menu-with-css-target/
  &:target {
    // IE10+:
    // transform: translate3d(0, 0, 0);

    // IE9+:
    left: 0;
  }
}

.content {
  @include full;
}

@include susy-breakpoint($break-medium, nobreak) {
  .main-content {
    @include span(6);
  }

  .secondary-content {
    @include span(last 6);
  }
}

@include susy-breakpoint($break-large, $break-large nobreak) {
  .container {
    @include container;
  }
  .open-menu, .close-menu {
    display: none;
  }
  aside {
    @include span(4);
    position: static;
    transform: none;
  }

  .content {
    @include span(8 last);
  }
}

.container {
  @include container;
}

header {
  @include full;
}

aside {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 20em;
  // IE10+:
  // left: 0;
  // transform: translate3d(-100%, 0, 0);
  // transition: transform 0.5s;

  // IE9+:
  left: -22em; // A little more than the width.
  transition: left 0.5s;

  // See https://css-tricks.com/off-canvas-menu-with-css-target/
  &:target {
    // IE10+:
    // transform: translate3d(0, 0, 0);

    // IE9+:
    left: 0;
  }
}

.content {
  @include full;
}

@include susy-breakpoint($break-medium, nobreak) {
  .main-content {
    @include span(6);
  }

  .secondary-content {
    @include span(last 6);
  }
}

@include susy-breakpoint($break-large, $break-large nobreak) {
  .container {
    @include container;
  }
  .open-menu, .close-menu {
    display: none;
  }
  aside {
    @include span(4);
    position: static;
    transform: none;
  }

  .content {
    @include span(8 last);
  }
}

Adjust position of collapsed sidebar
Adjust position of collapsed sidebar
