Fix animation and layout for offcanvas menu

Uses strategy from this forum comment:
http://foundation.zurb.com/forum/posts/547#comment_8840

app/assets/javascripts/darkswarm/layout/offcanvas.js.coffee

@@ -0,0 +1,6 @@
+$ ->
+  menu = $(".left-off-canvas-menu")
+  setOffcanvasMenuHeight = ->
+    menu.height($(window).height())
+  $(window).on("resize", setOffcanvasMenuHeight)
+  setOffcanvasMenuHeight()

app/assets/stylesheets/darkswarm/all.scss

@@ -10,6 +10,7 @@
 @import 'foundation-icons';
 
 @import 'base/*';
+@import 'layout/*';
 @import '*';
 @import 'pages/*';
 @import '../web/all';

app/assets/stylesheets/darkswarm/layout/offcanvas.css.scss

@@ -0,0 +1,17 @@
+@import "compass/css3/transition";
+
+.off-canvas-fixed {
+  @include transition(transform 1000ms ease-in-out);
+}
+
+.move-right > .off-canvas-fixed {
+  height: 100%;
+  -webkit-transform: translate3d(15.625rem, 0, 0);
+  transform: translate3d(15.625rem, 0, 0);
+}
+
+.left-off-canvas-menu {
+  -webkit-transform: none;
+  transform: none;
+  margin-left: -15.625rem;
+}

app/assets/stylesheets/darkswarm/menu.css.scss

@@ -222,7 +222,7 @@ nav.top-bar {
   background-color: white;
 }
 
-.off-canvas-wrap.move-right ul.off-canvas-list {
+.off-canvas-wrap ul.off-canvas-list {
   font-size: 0.875rem;
 
   .li-menu {
@@ -242,12 +242,10 @@ nav.top-bar {
       background-color: transparent;
       color: $brand-colour;
     }
-
-    @include transition(all 0.3s ease-in-out);
   }
 }
 
-.off-canvas-wrap.move-right ul.off-canvas-list i {
+.off-canvas-wrap ul.off-canvas-list i {
   font-size: 1.5rem;
   margin-right: 0.25rem;
 }

app/views/layouts/darkswarm.html.haml

@@ -42,9 +42,10 @@
     = inject_currency_config
 
     .off-canvas-wrap{offcanvas: true}
-      .inner-wrap
+      .fixed.off-canvas-fixed
         = render "shared/menu/menu" unless @hide_menu
 
+      .inner-wrap
         %section{ role: "main" }
           = yield
 

app/views/shared/menu/_menu.html.haml

@@ -1,4 +1,4 @@
-.fixed
-  = render partial: "shared/menu/large_menu"
-  %ofn-flash
-= render partial: "shared/menu/mobile_menu"
+= render "shared/menu/large_menu"
+%ofn-flash
+= render "shared/menu/mobile_menu"
+= render "shared/menu/offcanvas_menu"

app/views/shared/menu/_mobile_menu.html.haml

@@ -20,5 +20,3 @@
 
     %a{href: main_app.shop_path}
       {{ CurrentHub.hub.name }}
-
-= render partial: "shared/menu/offcanvas_menu" unless @hide_menu