_nav.scss

$nav-width: 225px;

.nav {
  background-color: #222;
  height: 100%;
  position: fixed;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;

  // fixed transition value
  left: -$nav-width;
  width: $nav-width;

  // menu items
  .nav-list {
    list-style: none;
    margin-left: 0;

    > li {
      margin: 0;

      > a {
        border-bottom: 1px solid #555;
        color: #eee;
        display: block;
        font-size: 1.2em;
        outline: 0;
        padding: 1em 0;
        text-decoration: none;

        &:hover,
        &:focus {
          background-color: $white;
          color: $lampblack;
          cursor: pointer;
        }
      }
    }
  }

  // close button
  #nav-close {
    background-color: #333;
    border: 2px solid #aaa;
    border-radius: 50%;
    color: #fafafa;
    font-size: 18px;
    display: none; // hide the close button by default
    margin: 0 auto;
    outline: 0;
    position: absolute;
    top: 0;

    // dimensions
    line-height: 32px;
    right: -18px; // 36 / 2
    width: 32px; // width + border = 36
    height: 32px;

    &:hover,
    &:focus {
      background-color: $white;
      border-color: $white;
      color: $black;
      cursor: pointer;
    }
  }
}

.wrap {
  // necessary for transition animation
  position: relative;
  left: 0;
}

.nav,
.wrap {
  transition: left 500ms;
}

#nav-toggle {
  display: none; // checkbox input will always stay hidden

  &:checked {
    ~ .nav {
      left: 0;

      // show the close button when the nav is open
      #nav-close {
        display: block;
      }
    }

    ~ .wrap {
      left: $nav-width; // fixed transition value
    }
  }
}