From a9e4f33a030e3596e55481d97a594c6d13bc6114 Mon Sep 17 00:00:00 2001
From: wes <wjak56@gmail.com>
Date: Sun, 16 Jul 2017 19:17:33 -0400
Subject: [PATCH] handle mobile menu dropdown

---
 src/scripts/app.tag      | 39 ++++++++++++++++++++++++++++++++++++++-
 src/scripts/projects.tag |  2 +-
 src/styles/riotblog.scss | 22 ++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/scripts/app.tag b/src/scripts/app.tag
index 0c209e4..54fa7ed 100644
--- a/src/scripts/app.tag
+++ b/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);
diff --git a/src/scripts/projects.tag b/src/scripts/projects.tag
index 9d82f66..0c60836 100644
--- a/src/scripts/projects.tag
+++ b/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>
diff --git a/src/styles/riotblog.scss b/src/styles/riotblog.scss
index b3715d0..021dec5 100644
--- a/src/styles/riotblog.scss
+++ b/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 */