put buttons on the side

src/scripts/browse.tag

@@ -1,11 +1,16 @@
 <browse>
-  <div class="content">
+  <div class="content container">
-    <menu
+    <div class="columns">
+      <div class="column col-2">
+        <categoryfilter
           name="Categories"
+          category={category}
           items={opts.state.categories}
           onfilter={filterCategories}
         >
-    </menu>
+        </categoryfilter>
+      </div>
+      <div class="column col-10">
         <loading if={loading}></loading>
         <div
           if={!loading}
@@ -29,10 +34,12 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 
 <script type="es6">
 import './raw.tag';
-import './menu.tag';
+import './categoryfilter.tag';
 import './loading.tag';
 import route from 'riot-route';
 import { default as RiotControl } from 'riotcontrol';
@@ -42,6 +49,7 @@ var self = this;
 
 self.route = route;
 self.loading = false;
+self.category = false;
 self.converter = new showdown.Converter();
 
 self.openPost = (id) => {
@@ -63,7 +71,11 @@ self.filterCategories = (category) => {
   return ((ev) => {
     ev.preventDefault();
 
-    self.update({"loading" : true});
+    self.update({
+      "loading" : true,
+      "category" : category
+    });
+
     self.route(`browse/${category}`);
     window.cached(`/blog/getbrowse/${category}/0`)
     .then((resp) => { return resp.json() })

src/scripts/categoryfilter.tag

@@ -0,0 +1,43 @@
+<categoryfilter>
+  <div>
+    <h4>
+      { opts.name }
+    </h4>
+    <ul>
+      <!-- menu header text -->
+      <li class="divider">
+      </li>
+      <!-- menu item -->
+      <div each={item in opts.items} class="menu-item menu-element">
+        <button
+          class="btn btn-primary category-button"
+          style={highlight(item)}
+          onclick={parent.opts.onfilter(item)}
+        >
+          { item }
+        </button>
+        <yield/>
+      </div>
+    </ul>
+  </div>
+<script>
+
+preventDefault(ev) {
+  ev.preventDefault;
+}
+
+highlight(item) {
+
+  var styles = {
+    "text-transform" : "capitalize",
+    "background-color" : "white"
+  };
+
+  if (this.opts.category == item) {
+    styles["background-color"] = "rgba(103, 173, 219, 0.40)";
+  }
+  return styles;
+}
+
+</script>
+</categoryfilter>

src/scripts/links.tag

@@ -28,7 +28,7 @@
 
           <div class="tile-action">
             <a target="_blank" href={ item.href }>
-              <button class="btn btn-primary">
+              <button class="btn btn-primary branded">
                 Link
               </button>
             </a>

src/scripts/menu.tag

@@ -9,10 +9,10 @@
     </a>
     <ul class="menu">
       <!-- menu header text -->
-      <li class="divider" data-content="LINKS">
+      <li class="divider">
       </li>
       <!-- menu item -->
-      <div each={item in opts.items} class="menu-item">
+      <div each={item in opts.items} class="menu-item menu-element">
         <a
           class="btn btn-primary menu-button"
           style={styles}
@@ -21,7 +21,6 @@
           { item }
         </a>
         <yield/>
-        <li class="divider"></li>
       </div>
     </ul>
   </div>
@@ -32,7 +31,8 @@ preventDefault(ev) {
 }
 
 this.styles = {
-  "text-transform" : "capitalize"
+  "text-transform" : "capitalize",
+  "border-color" : "#4b93c1"
 };
 
 </script>

src/scripts/postcontrols.tag

@@ -2,7 +2,7 @@
     <div class="controls container">
       <div class="columns">
         <div class="column col-6">
-          <button class={"btn btn-lg nav-button float-right " + (this.opts.atstart ? "disabled" : " ") + this.opts.prevloading}
+          <button class={"btn btn-lg nav-button branded float-right " + (this.opts.atstart ? "disabled" : " ") + this.opts.prevloading}
                   onclick={this.opts.prev}
           >
 
@@ -10,7 +10,7 @@
           </button>
         </div>
         <div class="column col-6">
-          <button class={"btn btn-lg nav-button float-left  " + (this.opts.atend ? "disabled" : " ") + this.opts.nextloading}
+          <button class={"btn btn-lg nav-button branded float-left  " + (this.opts.atend ? "disabled" : " ") + this.opts.nextloading}
                   onclick={this.opts.next}
           >
             <i class="fa fa-arrow-right" aria-hidden="true"></i>

src/scripts/projects.tag

@@ -31,7 +31,9 @@
               <a
                 target="_blank"
                 href={this.project().html_url}>
-                  <button class="btn btn-primary">See on github</button>
+                  <button class="btn btn-primary branded">
+                    See on github
+                  </button>
               </a>
               </div>
             </div>
@@ -43,7 +45,7 @@
           <div class="column col-6">
             <button
               onclick={this.prev}
-              class="btn btn-lg nav-button float-right"
+              class="btn btn-lg nav-button float-right branded"
             >
               <i class="fa fa-arrow-left" aria-hidden="true"></i>
             </button>
@@ -51,7 +53,7 @@
           <div class="column col-6">
             <button
               onclick={this.next}
-              class="btn btn-lg nav-button float-left"
+              class="btn btn-lg nav-button float-left branded"
             >
               <i class="fa fa-arrow-right" aria-hidden="true"></i>
             </button>

src/styles/riotblog.scss

@@ -79,6 +79,24 @@ $navbarHeight: 100px;
   }
 }
 
+.menu-element {
+  padding-bottom: 2px !important;
+  padding-top: 2px !important;
+}
+
+.category-button {
+  border-radius: 5px !important;
+  border-color: $branding2 !important;
+	display: block !important;
+	margin-top: 0;
+	padding: .6rem 1.2rem .4rem 1.2rem;
+  color: $branding !important;
+	text-decoration: none;
+  &:hover {
+    background-color: $brandingBG !important;
+  }
+}
+
 .menu-button {
 	display: block !important;
 	margin-top: 0;
@@ -90,7 +108,7 @@ $navbarHeight: 100px;
   }
 }
 
-.branded, button {
+.branded {
   border-radius: 5px !important;
   border-color: $branding2 !important;
 	display: block !important;