close the mobile menu

src/scripts/app.tag

@@ -17,7 +17,7 @@
       </sidebar>
     </section>
 
-    <div class={"show-md show-sm show-xs navigate-small dropdown dropdown-right " + (menuActive ? "active" : "")}>
+    <div id="menu" class={"show-md show-sm show-xs navigate-small dropdown dropdown-right " + (menuActive ? "active" : "")}>
       <button onclick={menuOn} class="mobile-navigate btn btn-link navigate-item dropdown-toggle" tabindex="0">
         <i class="bar-menu fa fa-bars" aria-hidden="true"></i>
       </button>
@@ -100,8 +100,6 @@ var self = this;
 
 self.cache = {};
 
-self.throttle = throttle;
-
 self.showBorder = false;
 
 window.addEventListener("scroll",
@@ -160,12 +158,21 @@ menuOn(ev) {
 }
 
 menuOff(ev) {
-  ev.preventDefault();
-  console.log("trying to close it");
+  if (ev !== undefined) {
+    ev.preventDefault();
+  }
   self.menuActive = false;
   self.update();
 }
 
+document.addEventListener("click", function(event) {
+  if(!event.target.closest('#menu')) {
+    if (self.menuActive) {
+      self.menuOff();
+    }
+  }
+});
+
 function activate(page) {
   return function() {
     if (page !== "posts") {

src/scripts/menu.tag

@@ -1,5 +1,5 @@
 <menu>
-  <div class="dropdown">
+  <div id="menu" class="dropdown">
     <a href="#" class="btn btn-primary menu-button dropdown-toggle" tabindex="0">
       { opts.name }<i class="icon icon-caret"></i>
     </a>

src/styles/riotblog.scss

@@ -27,7 +27,7 @@ $navbarHeight: 100px;
 
 .header {
   background-color: white;
-  height: 70px;
+  height: 60px;
   margin-top: 0px;
   padding-top: 0px;
   top: 0;