Improve navbar UX logic for #233

This change takes us away from using overflow:hidden on body by
default, only toggling this using a new `open` class when the navbar
has been expanded. `open` is toggled on body in the same places as it
is for the appear and navdrawer.

app/scripts/main.js

@@ -22,16 +22,19 @@
   var querySelector = document.querySelector.bind(document);
 
   var navdrawerContainer = querySelector('.navdrawer-container');
+  var body = querySelector('body');
   var appbarElement = querySelector('.app-bar');
   var menuBtn = querySelector('.menu');
   var main = querySelector('main');
 
   function closeMenu() {
+    body.classList.remove('open');
     appbarElement.classList.remove('open');
     navdrawerContainer.classList.remove('open');
   }
 
   function toggleMenu() {
+    body.classList.toggle('open');
     appbarElement.classList.toggle('open');
     navdrawerContainer.classList.toggle('open');
   }

app/styles/main.css

@@ -20,10 +20,13 @@ body {
   font-weight: 300;
   background-color: #FFFFFF;
   box-sizing: border-box;
-  overflow: hidden;
   min-height: 100%;
 }
 
+body.open {
+  overflow: hidden;
+}
+
 .app-bar {
   display: block;
   width: 100%;