handle mobile menu dropdown

src/scripts/app.tag

@@ -1,5 +1,25 @@
 <app>
-  <ul class="navigate tab tab-block">
+  <div class="show-md show-sm show-xs navigate dropdown dropdown-right">
+    <button onclick={this.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>
+    <!-- menu component -->
+    <ul
+      if={this.menuActive}
+      class="mobile-menu tab tab-block menu">
+      <li
+        each="{page in ['posts', 'projects', 'links', 'about']}"
+        class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
+        data-is="navtab"
+        active={this.parent.active.get(page)}
+        to={this.parent.to(page)}
+        title={page}
+        onclick={this.menuOff}
+      >
+      </li>
+    </ul>
+  </div>
+  <ul class="hide-md hide-sm hide-xs navigate tab tab-block">
     <li
       each="{page in ['posts', 'projects', 'links', 'about']}"
       class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
@@ -52,6 +72,7 @@ import lens from './lenses.js';
 this.R = R;
 this.route = route;
 this.riot = riot;
+this.menuActive = false;
 
 this.route.base('#!')
 
@@ -70,6 +91,21 @@ this.active = lens.actives({
 
 var self = this;
 
+toggleMenu(ev) {
+  ev.preventDefault();
+  self.update({"menuActive" : !self.menuActive});
+}
+
+menuOn(ev) {
+  ev.preventDefault();
+  self.update({"menuActive" : true});
+}
+
+menuOff(ev) {
+  ev.preventDefault();
+  self.update({"menuActive" : false});
+}
+
 function activate(page) {
   return function() {
     console.log(`activating ${page}`);
@@ -95,6 +131,7 @@ to(name) {
     if (e !== undefined) {
       e.preventDefault();
     }
+    this.menuOff(e);
     this.route(name);
     return;
   }).bind(this);

src/scripts/projects.tag

@@ -7,7 +7,7 @@
         <div class="column col-4">
           <figure
             if={this.avatar_url}
-            class="float-left avatar avatar-lg"
+            class="float-left avatar my-avatar avatar-lg"
           >
             <img src={this.avatar_url}></img>
           </figure>

src/styles/riotblog.scss

@@ -43,6 +43,10 @@ $branding3: #1b4c6c;
   }
 }
 
+.bar-menu {
+  font-size: 100% !important;
+}
+
 .tab-active {
   border-bottom-color: $branding !important;
   color: $branding !important;
@@ -109,6 +113,11 @@ p, h6, h4 {
   }
 }
 
+.navigate-tab-mobile {
+  @extend .navigate-tab;
+  margin: auto !important;
+}
+
 .navigate-item {
   color: $branding !important;
   &:hover {
@@ -116,6 +125,19 @@ p, h6, h4 {
   }
 }
 
+.mobile-navigate {
+  width: 60px;
+  height: 45px !important;
+}
+
+.mobile-menu {
+  left: -100% !important;
+}
+
+.my-avatar {
+  z-index: 0 !important;
+}
+
 .content-box {
   margin-top: 10px;
   display: flex !important;                   /* defines flexbox */