<header>
  <a href="#" class="toggle-menu fontawesome-reorder"></a>
  <h1>Title</h1>
</header>

<aside class="sidebar">
  <h3>Contents</h3>
  <nav>
    <ul>
      <li>Chapter 1</li>
      <li class="active">Chapter 2</li>
      <li>Chapter 3</li>
      <li>Chapter 4</li>
      <li>Chapter 5</li>
      <li>Chapter 6</li>
      <li>Chapter 7</li>
      <li>Chapter 8</li>
      <li>Chapter 9</li>
      <li>Chapter 10</li>
    </ul>
  </nav>
</aside>
  
<section class="main">
  <h2>Chapter 2</h2>
  <p>Ennui Williamsburg Echo Park pork belly, hella flannel single-origin coffee. Bicycle rights artisan beard Neutra cardigan Echo Park. Shoreditch flannel tote bag pug jean shorts post-ironic semiotics cornhole forage. Skateboard aesthetic synth leggings Banksy. Shabby chic PBR plaid helvetica dreamcatcher tousled, irony ethnic Tonx sustainable before they sold out McSweeney's. Hoodie Banksy freegan bicycle rights, aesthetic try-hard fap ethnic deep v fixie. Before they sold out +1 ugh, Bushwick Wes Anderson cred Marfa synth butcher jean shorts Terry Richardson.</p>

    <p>3 wolf moon blue bottle Truffaut ennui Bushwick, VHS organic skateboard authentic pickled tattooed brunch kogi freegan McSweeney's. Lomo skateboard american apparel, gastropub Schlitz food truck blue bottle. Salvia shoreditch ennui asymmetrical Williamsburg. Cliche umami mumblecore asymmetrical disrupt craft beer, selvage whatever sustainable american apparel YOLO Portland organic. Fashion axe mixtape salvia, Wes Anderson cred food truck DIY. Yr Pinterest Portland Truffaut four loko, semiotics Vice. Authentic lomo bitters, mlkshk raw denim beard narwhal jean shorts cliche tousled PBR.</p>

    <p>Wolf irony Schlitz, ethical gastropub disrupt cray. Skateboard High Life viral, try-hard pitchfork pour-over fap next level. High Life butcher meh, Vice single-origin coffee Marfa intelligentsia farm-to-table gentrify occupy cardigan helvetica salvia vegan. Bicycle rights chillwave keytar before they sold out, narwhal Brooklyn mustache. Plaid literally Schlitz Carles, stumptown swag chillwave Echo Park vinyl jean shorts McSweeney's roof party bespoke. Small batch banjo salvia Terry Richardson 3 wolf moon wolf twee hella. Occupy farm-to-table tattooed tousled twee pug.</p>

    <p>Disrupt umami kogi selvage hoodie. YOLO brunch chambray beard, Schlitz intelligentsia Austin. Fanny pack iPhone semiotics Tonx flexitarian, disrupt tote bag hoodie dreamcatcher Portland ugh. Truffaut plaid cardigan, ethnic mustache actually master cleanse Pinterest deep v brunch. Shoreditch kale chips Odd Future typewriter Echo Park, artisan pug pour-over disrupt american apparel wayfarers. DIY semiotics chillwave cardigan gluten-free freegan. Tumblr keffiyeh art party, jean shorts viral put a bird on it irony hella gluten-free whatever cornhole deep v.</p>
</section>

@import compass

@import url(http://weloveiconfonts.com/api/?family=fontawesome)

[class*="fontawesome-"]:before
  font-family: 'fontawesome', sans-serif
  
*, *:before, *:after
  box-sizing: border-box

html, body
  height: 100%

html
  background-color: #222

body
  position: relative
  max-width: 1024px
  min-width: 768px
  margin: 0 auto
  
header
  color: #fff
  background-color: #000
  overflow: hidden

h1
  font-weight: normal
  margin: 0
  padding: 0 20px
  line-height: 2
  position: relative
  transition: all .3s ease-out

.sidebar, .main
  transition: all .3s ease-out
  overflow: scroll
  -webkit-overflow-scrolling: touch
  position: absolute
  top: 64px
  bottom: 0

.sidebar
  width: 260px
  background-color: #333
  left: 0

.main
  background-color: #f5f5f5
  position: absolute
  left: 260px
  right: 0
  padding: 20px

h2
  margin: 0 0 1em 0

h3
  background-color: #555
  color: #ccc
  margin: 0
  padding: 0 20px
  font-weight: normal
  line-height: 2
  text-transform: uppercase
  font-size: 90%
  
.toggle-menu
  color: #ccc
  text-decoration: none
  font-size: 50px
  float: left
  display: block
  position: absolute
  left: 0
  z-index: -1
  opacity: 0
  transition: opacity .3s ease-out
  &:hover
    color: #fff
  &:before
    height: 64px
    width: 64px
    display: block
    text-align: center
    line-height: 64px
    font-size: 24px

nav ul
  list-style: none
  padding: 0
  margin: 0
  background-color: #444
  li
    padding: 20px
    color: #ccc
    background-color: #333
    margin-bottom: 1px
    border-left: 10px solid transparent
    &.active
      border-color: #e35205
    
@media all and (max-width: 1024px)
  .sidebar.toggled
    left: 0
    z-index: 10
    box-shadow: 3px 1px 10px rgba(0,0,0,.8)
    + .main
      overflow: hidden
  .sidebar
    left: -260px
  .main
    left: 0
  .toggle-menu
    z-index: 1
    opacity: 1
  h1
    left: 40px
    

$(function(){
  $('.toggle-menu').click(function(e){
    e.preventDefault();
    $('.sidebar').toggleClass('toggled');
  });
});