<div class="wrapper">
  <div class="sidebar">
    <ul class="nav">
      <li><a>Dashboard</a></li>
      <li><a>Charts</a></li>
      <li><a class="active">Milestones</a></li>
      <li><a>Lab</a></li>
      <li><a>Preview</a></li>
      <li><a>Assets</a></li>
      <li><a>Settings</a></li>
      <li><a>Logout</a></li>
    </ul>
  </div>
  <div class="content isOpen">
    <a class="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <line x1="0" y1="20" x2="100" y2="20" />
        <line x1="0" y1="50" x2="100" y2="50" />
        <line x1="0" y1="80" x2="100" y2="80" />
      </svg>
    </a>
    <h1>Flexbox Off Canvas Menu</h1>
  </div>
</div>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

body {
  font: 500 .9rem/1 'Avenir Next', sans-serif;
  color: #333;
  background: rgb(45,48,58);
}

.wrapper {
  display: flex;
  min-height: 100%;
}

.sidebar {
  position: absolute;
  width: 220px;
  padding: 20px;
}

.content {
  flex: 1;
  padding: 50px;
  background: #fff;
  box-shadow: 0 0 5px #000;
  transform: translateX(0);
  transition: transform .3s;
}

.content.isOpen {
  transform: translateX(220px);
}

.button {
  cursor: pointer;
}

.button svg {
  width: 40px;
}

.button line {
  stroke: black;
  stroke-width: 5;
}

h1 {
  margin-top: 25px;
  font-size: 40px;
  font-weight: 400;
}

.nav {
  list-style: none;
}

.nav li a {
  position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 16px 0 16px 50px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.nav li a:hover,
.nav li a.active {
  background: rgba(0,0,0,.3);
}

.nav li a::before {
  font: 14px fontawesome;
  position: absolute;
  top: 15px;
  left: 20px;
}

.nav li:nth-child(1) a::before { content: '\f00a'; }
.nav li:nth-child(2) a::before { content: '\f012'; }
.nav li:nth-child(3) a::before { content: '\f0e8'; }
.nav li:nth-child(4) a::before { content: '\f0c3'; }
.nav li:nth-child(5) a::before { content: '\f022'; }
.nav li:nth-child(6) a::before { content: '\f115'; }
.nav li:nth-child(7) a::before { content: '\f085'; }
.nav li:nth-child(8) a::before { content: '\f023'; left: 23px; }
document.querySelector('.button').addEventListener('click', () => {
  document.querySelector('.content').classList.toggle('isOpen');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.