Off canvas nav in SASS

nav.js

// Off canvas navigation
$(document).ready(function() {

  $('body').addClass('js');

  var $menulink = $('.menu-link');

  $menulink.click(function() {
    event.preventDefault();

    var footHeight = $('footer').outerHeight();
    $('.unicorn').height(footHeight);
        console.log(footHeight);


    $menulink.toggleClass('active');
    $('#container').toggleClass('active');
  });
});

off-canvas-nav.sass

// NAVIGATION STYLES ===========================================================

.container.active
  left: 16rem

.menu-link
  position: absolute
  top: 0
  left: 0
  width: 3.8rem
  height: 3.5rem

.menu-link:before
  content: ""
  position: absolute
  left: 1rem
  top: 1rem
  width: 2rem
  height: 0.25rem
  background: $textGray
  @include box-shadow(0 0.5rem 0 0 $textGray, 0 1rem 0 0 $textGray)

nav[role=navigation]
  overflow: hidden
  background-color: $bgFoot
  color: $textLtGray

.js nav[role=navigation]
  width: 16rem
  height: 100%
  position: absolute
  top: 0
  left: -16rem

  li
    display: inline-block

  ul
    padding: 0

  li a
    display: block
    padding: 1rem
    color: $textGray