<header>
  <h1>Logo</h1>
  <i class="fa fa-bars nav-toggle"></i>
  <nav role="navigation">
    <i class="fa fa-close nav-toggle"></i>
    <ul>
      <li><a href="#">Homepage</a></li>
      <li><a href="#">Report a Bug</a></li>
      <li><a href="#">Version History</a></li>
      <li><a href="#">Developer Website</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Download App!</a></li>
    </ul>
  </nav>
</header>

$green: #87DB48
$drkgreen: #5CA724
$black: #444

body
  font-family: sans-serif
  color: $black

header
  position: relative
  padding-top: 1px
  //background: linear-gradient(red, yellow)
  //color: white
  a
    color: white
    text-decoration: none
    text-transform: capitalize

nav 
  //border: 1PX SOLID HOTPINK
  position: fixed
  top: 0
  right: 0
  width: 60%
  height: 100%
  background: linear-gradient($green, $drkgreen)
  transform: translateX(102%)
  transition: transform 0.35s ease
  z-index: 10
  box-shadow: 0 0 12px 2px rgba(0,0,0,0.25)
  &.open 
    overflow: auto
    transform: translateX(0rem)
  

nav ul 
  margin: 6rem 0 0
  padding: 0

nav li 
  list-style: none

nav a
  display: block
  margin: 0.5rem 0
  padding: 1rem 1rem
  transition: transform 0.35s ease
  &:hover, &:active 
    transform: translateX(0.5rem)

nav.open a 
  padding-left: 2rem

nav.open a i
  //padding-right: 1rem

.nav-toggle
  position: absolute
  top: 1rem
  right: 1rem
  cursor: pointer
  font-size: 1.25rem
  float: right

nav.open .nav-toggle 
  //left: 3rem
  color: #FFF
  opacity: 0.5

.back
  //BORDER: 1PX SOLID CYAN
  //color: mediumaquamarine
  overflow: hidden
  
.blur
  filter: blur(2px)

$(function(){
  $('.nav-toggle, nav a').on('click',function(){
    $('nav').toggleClass('open');
    $('main').toggleClass('back').toggleClass("blur");
 
  });
});