menu stuff

package.json

@@ -39,6 +39,7 @@
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "querystring": "^0.2.0",
+    "riotcontrol": "^0.0.3",
     "rollup-plugin-json": "^2.1.1",
     "showdown": "^1.6.4",
     "spectre.css": "^0.2.14",

src/scripts/app.tag

@@ -1,12 +1,18 @@
 <app>
-  <div class="">
+  <div class="header">
+    <section style={{"margin-top" : "0px"}} class="text-center nav navbar centered page-top navbar-section">
+      <h4 class="blog-title">{ currentPage }</h4>
+    </section>
+  </div>
+  <div class="app-body">
     <div class="">
-
+    <section class="text-center nav navbar centered page-top navbar-section">
       <sidebar
         if={this.active.get("posts")}
-        name="Category"
+        name="Filter By Category"
         items={["Programming", "Books", "Philosophy"]}>
       </sidebar>
+    </section>
 
       <div class="">
         <div class="show-md show-sm show-xs navigate-small dropdown dropdown-right">
@@ -105,12 +111,22 @@ self.cached = fetchCached({
   }
 });
 
-this.R = R;
-this.route = route;
-this.riot = riot;
-this.menuActive = false;
+self.R = R;
+self.route = route;
+self.riot = riot;
+self.menuActive = false;
+self.currentPage = "";
+
+RiotControl.on("postswitch",
+  (ev) => {
+    self.update(
+      {
+        "currentPage" : ev.title
+      })
+    }
+  );
 
-this.route.base('#!')
+self.route.base('#!')
 
 function PostUpdated() {
   riot.observable(this);
@@ -151,7 +167,8 @@ menuOff(ev) {
 function activate(page) {
   return function() {
     if (page !== "posts") {
-      document.title = `Wes Kerfoot ${page.slice(0,1).toUpperCase()}${page.slice(1,page.length)}`;
+      document.title = `${page.slice(0,1).toUpperCase()}${page.slice(1,page.length)}`;
+      self.currentPage = `Wes Kerfoot ${document.title}`;
     }
     console.log(`activating ${page}`);
     self.active = lens.setActive(self.active, page);

src/scripts/post.tag

@@ -20,8 +20,6 @@
           postid={this.opts.state._id}
         >
         </social>
-        <h4 class="post-title">{ this.title }</h4>
-
         <p class="post-content centered text-break">
           <raw
             content="{ this.converter.makeHtml(this.content) }"
@@ -125,6 +123,10 @@ updatePost(postcontent) {
   self.nextloading = "";
   self.route(`/posts/${self._id}`);
 
+  RiotControl.trigger("postswitch", {"title" : self.title});
+
+  self.parent.update();
+
   self.refs.social.updateButton(self._id, self.title);
 
   self.one("updated", self.toTop);

src/scripts/riotblog.js

@@ -1,4 +1,5 @@
 import riot from 'riot';
+import { default as RiotControl } from 'riotcontrol';
 import './bbutton.tag';
 import './post.tag';
 import './posts.tag';
@@ -10,6 +11,10 @@ import { default as promise } from 'es6-promise';
 
 promise.Promise.polyfill()
 
+window.RiotControl = RiotControl;
+
+RiotControl.addStore(new riot.observable());
+
 riot.mount("app");
 riot.mount("editor");
 riot.mount("post",
@@ -17,6 +22,5 @@ riot.mount("post",
     "creator" : "author"
   });
 
-riot.mount("decision");
 riot.mount("bbutton");
 riot.mount("projects");

src/scripts/sidebar.tag

@@ -7,36 +7,43 @@
     onclick={swipe}
     >
       <i
-        class="fa fa-bars"
+        class="fa fa-filter"
         aria-hidden="true"
       >
       </i>
   </button>
-  <div show={this.swiped !== undefined} style={ this.styles() } class={`animated ${this.swiped !== undefined ? (this.swiped ? "slideInLeft" : "slideOutLeft") : "" } container`}>
-    <div style={{"height" : "100%"}} class="columns col-oneline col-gapless">
-
-      <div class="panel column col-11">
+  <div
+    show={this.swiped !== undefined}
+    style={ this.styles() }
+    id="sidebar"
+    class={`animated ${this.swiped !== undefined ? (this.swiped ? "fadeInLeft" : "fadeOutLeft") : "" } container`}
+  >
+    <div
+      style={{"height" : "100%", "overflow-x" : "hidden"}}
+      class="columns col-oneline col-gapless"
+    >
+      <div style={nobg} class="panel column col-11">
         <div class="panel-header">
           <div class="panel-title">
             { opts.name }
           </div>
         </div>
 
-        <div style={panelStyles} class="panel-body">
-          <ul class="menu">
+        <div style={R.merge(panelStyles, nobg)} class="panel-body">
+          <ul style={nobg} class="menu">
 
-            <li class="divider" data-content="LINKS">
+            <li style={R.merge(nobg, subtitle)} class="divider sidebar-divider" data-content="Categories">
             </li>
 
-            <li each={item in opts.items} class="menu-item">
+            <li style={R.merge(menuStyles, nobg)} each={item in opts.items} class="menu-item">
               <a
-                class="btn btn-primary menu-button"
+                style={nobg}
+                class="btn btn-primary sidebar-button"
                 href="#"
               >
                 { item }
               </a>
               <yield/>
-              <li class="divider"></li>
             </li>
           </ul>
         </div>
@@ -54,9 +61,15 @@
 
 <script>
 
+import { default as jquery } from 'jquery';
 import { default as lodash } from 'lodash';
+import { default as R } from 'ramda';
 var self = this;
 
+self.R = R;
+
+var background = "rgba(255, 255, 255, 0.95)";
+
 self.open = false;
 self.swiped = undefined;
 
@@ -70,44 +83,77 @@ self.swipe = lodash.debounce(() => {
 
 self.buttonStyles = (() => {
   return {
-    "top": "0",
-    "overflow-x": "hidden"
+    "top": "0"
   };
 });
 
 self.closedButton = (() => {
   return {
-    "background-color" : "rgba(103, 173, 219, 0.40)",
+    "background-color" : background,
     "font-color" : "black",
-    "height": "50px",
-    "width": "50px",
-    "font-size" : "40px",
+    "height": "30px",
+    "width": "30px",
+    "font-size" : "20px",
     "position": "fixed",
     "z-index": "1",
-    "top": "0",
-    "left": "0"
+    "top": "10px",
+    "left": "10px"
   };
 });
 
 self.styles = (() => {
   return {
-    "height": "100%",
-    "width": "300px",
+    "box-shadow" : "6px 8px 16px -4px rgba(0,0,0,0.75)",
+    "-webkit-box-shadow" : "6px 8px 16px -4px rgba(0,0,0,0.75)",
+    "-moz-box-shadow" : "6px 8px 16px -4px rgba(0,0,0,0.75)",
+    "height": "80%",
+    "width": "250px",
     "position": "fixed",
     "z-index": "1",
     "top": "0",
     "left": "0",
     "overflow-x": "hidden",
     "padding-top": "60px",
-    "background-color" : "rgba(103, 173, 219, 0.40)"
+    "border" : "1px solid",
+    "background-color" : background
   };
 });
 
 self.panelStyles = {
-  "width" : "90%",
+  "width" : "100%",
   "height" : "100%",
+  "margin" : "0 auto",
+  "padding" : "0px 0px 0px 0px"
+};
+
+self.menuStyles = {
+  "width" : "100%",
   "margin" : "0 auto"
 };
 
+self.nobg = {
+  "background-color" : "transparent",
+  "background" : "none",
+  "border" : "none",
+  "box-shadow" : "none"
+};
+
+self.subtitle = {
+  "color" : "#4b93c1",
+  "width" : "100%"
+};
+
+self.one("updated",
+  () => {
+      jquery(document).click(function(event) {
+          if(!jquery(event.target).closest('#sidebar').length) {
+            console.log("clicked outside of the sidebar");
+            if (self.open) {
+              self.swipe();
+            }
+          }
+      });
+  });
+
 </script>
 </sidebar>

src/styles/riotblog.scss

@@ -1,10 +1,44 @@
 $brandingBG: rgba(103, 173, 219, 0.40);
+$brandingBG2: rgba(75, 147, 193, 0.65);
 $branding: #25658f;
 $branding2: #4b93c1;
 $branding3: #1b4c6c;
 
 $menuWidth: 60px;
 
+$navbarHeight: 100px;
+
+.blog-title {
+  text-transform: capitalize;
+  margin-top: 10px;
+  max-width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+  @media (max-width: 600px) {
+    font-size: 1.5em;
+  }
+  @media (max-width: 530px) {
+    font-size: 1.2em;
+  }
+}
+
+.header {
+  background-color: $brandingBG2;
+  color: white;
+  font-weight: 800;
+  height: 70px;
+  margin-top: 0px;
+  padding-top: 0px;
+  top: 0;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+}
+
+.app-body {
+  margin-top: 80px;
+}
+
 .twitter-share-button-rendered {
   font-size: 1.5em;
 }
@@ -21,6 +55,24 @@ $menuWidth: 60px;
   margin-top: 25%;
 }
 
+.sidebar-button {
+	display: block !important;
+	margin-top: 0;
+  border: none;
+  color: black !important;
+	text-decoration: none;
+  &:hover {
+    background-color: $brandingBG !important;
+  }
+}
+
+.sidebar-divider {
+  &:after {
+    background: none !important;
+    color: $branding3 !important;
+  }
+}
+
 .menu-button {
 	display: block !important;
 	margin-top: 0;
@@ -206,13 +258,13 @@ p, h6, h4 {
   margin: auto;
   max-width: 80%;
   @media (max-width: 1000px) {
-    max-width: 90%;
+    max-width: 85%;
   }
   @media (max-width: 800px) {
-    max-width: 95%;
+    max-width: 87%;
   }
   @media (max-width: 400px) {
-    max-width: 100%;
+    max-width: 90%;
   }
 }
 

src/templates/index.html

@@ -8,9 +8,6 @@
 </head>
 <html>
   <body>
-    <section class="text-center nav navbar centered page-top navbar-section">
-      <h1 class="blog-title"></h1>
-    </section>
     <app csrf_token="{{ csrf_token() }}"></app>
     <footer class="footer">
     </footer>

yarn.lock

@@ -1225,6 +1225,10 @@ riot@^3.3.1:
     simple-dom "0.3.2"
     simple-html-tokenizer "^0.4.1"
 
+riotcontrol@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/riotcontrol/-/riotcontrol-0.0.3.tgz#8b3d7c93002964a331d7f7bbd8490f167eca9eb2"
+
 rollup-plugin-buble@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-buble/-/rollup-plugin-buble-0.15.0.tgz#83c3e89c7fd2266c7918f41ba3980313519c7fd0"