Generated by SassMeister.com.

SassMeister-input-HTML.html

<header class="header" role="banner">
  <div class="header-wrapper">
    <h1 class="brand">One|North</h1>
  </div>
</header>

<div class="container">
  <input class="nav-toggle" type="checkbox" id="thebox" />
  <label class="nav-toggle__label" for="thebox">click to change state</label>
  <div class="dashboard is-shifted">
      <section class="dashboard-section">
        <header class="dashboard-section__header">
          <h2 class="h3-size">Recently Added</h2>
        </header>
        <nav class="nav">
            <ul class="link-list">
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
            </ul>
          </nav>
      </section>
      <section class="dashboard-section">
        <header class="dashboard-section__header">
          <h2 class="h3-size">Recently Updated</h2>
        </header>
        <nav class="nav">
            <ul class="link-list">
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
            </ul>
          </nav>
      </section>
  </div>
  
  <nav class="nav--menu">
    <ul class="nav-list">
      <!--<li class="nav-list__item nav-list__item--trigger">-->
      <!--  <button class="nav-close" type="button"><-</button>-->
      <!--</li>-->
      <li class="nav-list__item is-active">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Dashboard
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          People
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Main Content Types
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Experience
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Users
        </a>
      </li>
    </ul>
  </nav>
  
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

$body-font-stack: sans-serif;
$color-brand: #990000;
$color-white: #FAFAFA;
$color-dark-grey: #3D3D3D;
$color-transparent: rgba(0,0,0,0);
$color-text: #3D3D3D;
$color-text-light: #B4B4B4;
$color-icon: $color-text;
$color-border: rgba(255,255,255,0.1);

html, body {
  height: 100%; 
}

body {
  font-family: $body-font-stack;
  line-height: 1.4;
}

.header {
 background: $color-brand;
 color: $color-white;
}

.header-wrapper {
  padding: 1em;
}

.brand {
  margin: 0;
  font-size: 1.5em;
}

.container {
  min-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}

.dashboard {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.5em 2em;
  transform: translateX(60px);
  background: $color-white;
  border-left: 16px solid $color-dark-grey;
  z-index: 2;
  
  &.is-shifted {
    transform: translateX(300px);
  }
}

.nav-toggle {
  display: none;
}

.nav-toggle:checked + label {
  background: #000;
  color: $color-text-light;
}

.nav-toggle__label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 32px;
  background: white;
  color: $color-text;
}

.nav--menu {
  position: fixed;
  width: 300px;
  height: 100%;
  background: $color-dark-grey;
  z-index: 1;
}

.nav-list {
  width: 90%;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 auto;
  padding: 0;
}

.nav-list__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid $color-border;
  
  &:first-child {
    border: 0;
  }
}

.nav-list__link {
  display: inline-block;
  padding: 16px 0;
  color: $color-white;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 2;
}

.nav-close {
  width: 32px;
  padding: 16px 0;
  border: 0;
  font-size: 1.5em;
  background: $color-transparent;
  color: $color-white;
}

// this is just to fake the icon
.nav-icon {
  float: left;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  margin-right: 1em;
  background: $color-white;
  border-radius: 50%;
}

.dashboard-section {
  margin-bottom: 4em;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.dashboard-section__header {
  border-bottom: 1px solid $color-text;
  margin-bottom: 2em;
  
  h2 {
    margin-bottom: 0;
  }
}

.link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

SassMeister-output.css

html, body {
  height: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

.header {
  background: #990000;
  color: #FAFAFA;
}

.header-wrapper {
  padding: 1em;
}

.brand {
  margin: 0;
  font-size: 1.5em;
}

.container {
  min-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}

.dashboard {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.5em 2em;
  transform: translateX(60px);
  background: #FAFAFA;
  border-left: 16px solid #3D3D3D;
  z-index: 2;
}

.dashboard.is-shifted {
  transform: translateX(300px);
}

.nav-toggle {
  display: none;
}

.nav-toggle:checked + label {
  background: #000;
  color: #B4B4B4;
}

.nav-toggle__label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 32px;
  background: white;
  color: #3D3D3D;
}

.nav--menu {
  position: fixed;
  width: 300px;
  height: 100%;
  background: #3D3D3D;
  z-index: 1;
}

.nav-list {
  width: 90%;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 auto;
  padding: 0;
}

.nav-list__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-list__item:first-child {
  border: 0;
}

.nav-list__link {
  display: inline-block;
  padding: 16px 0;
  color: #FAFAFA;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 2;
}

.nav-close {
  width: 32px;
  padding: 16px 0;
  border: 0;
  font-size: 1.5em;
  background: transparent;
  color: #FAFAFA;
}

.nav-icon {
  float: left;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  margin-right: 1em;
  background: #FAFAFA;
  border-radius: 50%;
}

.dashboard-section {
  margin-bottom: 4em;
}

.dashboard-section:last-child {
  margin-bottom: 0;
}

.dashboard-section__header {
  border-bottom: 1px solid #3D3D3D;
  margin-bottom: 2em;
}

.dashboard-section__header h2 {
  margin-bottom: 0;
}

.link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

SassMeister-rendered.html

<header class="header" role="banner">
  <div class="header-wrapper">
    <h1 class="brand">One|North</h1>
  </div>
</header>

<div class="container">
  <input class="nav-toggle" type="checkbox" id="thebox" />
  <label class="nav-toggle__label" for="thebox">click to change state</label>
  <div class="dashboard is-shifted">
      <section class="dashboard-section">
        <header class="dashboard-section__header">
          <h2 class="h3-size">Recently Added</h2>
        </header>
        <nav class="nav">
            <ul class="link-list">
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
              <li class="link-list__item"><a href="#">Recently Added Item</a></li>
            </ul>
          </nav>
      </section>
      <section class="dashboard-section">
        <header class="dashboard-section__header">
          <h2 class="h3-size">Recently Updated</h2>
        </header>
        <nav class="nav">
            <ul class="link-list">
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
              <li class="link-list__item"><a href="#">Recently Updated Item</a></li>
            </ul>
          </nav>
      </section>
  </div>
  
  <nav class="nav--menu">
    <ul class="nav-list">
      <!--<li class="nav-list__item nav-list__item--trigger">-->
      <!--  <button class="nav-close" type="button"><-</button>-->
      <!--</li>-->
      <li class="nav-list__item is-active">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Dashboard
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          People
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Main Content Types
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Experience
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Users
        </a>
      </li>
    </ul>
  </nav>
  
</div>