shitty sidebar working more or less

src/scripts/app.tag

@@ -1,15 +1,14 @@
 <app>
-  <div class="container">
-    <div class="columns">
+  <div class="">
+    <div class="">
 
-      <div class="column hide-xs hide-sm hide-md col-1 col-xl-1 col-lg-2">
-        <div
-          data-is="menu"
+      <sidebar
+        if={this.active.get("posts")}
         name="Category"
         items={["Programming", "Books", "Philosophy"]}>
-        </div>
-      </div>
-      <div class="column col-xl-11 col-lg-10 col-md-12 col-sm-12 col-xs-12">
+      </sidebar>
+
+      <div class="">
         <div class="show-md show-sm show-xs navigate-small 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>
@@ -30,6 +29,7 @@
             </li>
           </ul>
         </div>
+
         <ul class="hide-md hide-sm hide-xs navigate tab tab-block">
           <li
             each="{page in ['posts', 'projects', 'links', 'about']}"
@@ -75,7 +75,7 @@
     </div>
   </div>
 <script>
-import './menu.tag';
+import './sidebar.tag';
 import './navtab.tag';
 import './projectsview.tag';
 import './postsview.tag';

src/scripts/sidebar.tag

@@ -0,0 +1,108 @@
+<sidebar>
+  <div
+    if={!open}
+    class="animated fadeIn"
+    style={this.closedButton()}
+    onclick={swipe}
+    >
+  </div>
+  <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 class="panel-header">
+          <div class="panel-title">
+            { opts.name }
+          </div>
+        </div>
+
+        <div style={panelStyles} class="panel-body">
+          <ul class="menu">
+
+            <li class="divider" data-content="LINKS">
+            </li>
+
+            <li each={item in opts.items} class="menu-item">
+              <a
+                class="btn btn-primary menu-button"
+                href="#"
+              >
+                { item }
+              </a>
+              <yield/>
+              <li class="divider"></li>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div
+        style={buttonStyles()}
+        class={`column ${this.open ? "col-1" : "col-12"}`}
+        onclick={this.swipe}
+        >
+      </div>
+
+    </div>
+  </div>
+
+<script>
+
+import { default as lodash } from 'lodash';
+var self = this;
+
+self.open = false;
+self.swiped = undefined;
+
+self.swipe = lodash.debounce(() => {
+    console.log("clicked");
+    self.update({
+      "swiped" : self.swiped == undefined ? true : !self.swiped,
+      "open" : !self.open
+    });
+  }, 200);
+
+self.buttonStyles = (() => {
+  return {
+    "background-color" : "black",
+    "top": "0",
+    "overflow-x": "hidden"
+  };
+});
+
+self.closedButton = (() => {
+  return {
+    "height": "50px",
+    "width": "50px",
+    "position": "fixed",
+    "z-index": "1",
+    "top": "0",
+    "left": "0",
+    "overflow-x": "hidden",
+    "padding-top": "60px",
+    "background-color" : "black"
+  };
+});
+
+self.styles = (() => {
+  return {
+    "height": "100%",
+    "width": "300px",
+    "position": "fixed",
+    "z-index": "1",
+    "top": "0",
+    "left": "0",
+    "overflow-x": "hidden",
+    "padding-top": "60px",
+    "background-color" : "rgba(103, 173, 219, 0.40)"
+  };
+});
+
+self.panelStyles = {
+  "width" : "90%",
+  "height" : "100%",
+  "margin" : "0 auto"
+};
+
+</script>
+</sidebar>