initial sidemenu implementation using snap.js

components/ionSideMenu/ionSideMenu.html

@@ -0,0 +1,5 @@
+<template name="ionSideMenu">
+  <div class="{{classes}}">
+    {{> UI.contentBlock}}
+  </div>
+</template>

components/ionSideMenu/ionSideMenu.js

@@ -0,0 +1,15 @@
+Template.ionSideMenu.helpers({
+  classes: function () {
+    var classes = ['snap-drawer'];
+
+    if (this.side) {
+      classes.push('menu-' + this.side);
+      classes.push('snap-drawer-' + this.side);
+    } else {
+      classes.push('menu-left');
+      classes.push('snap-drawer-left');
+    }
+
+    return classes.join(' ');
+  }
+});

components/ionSideMenuContainer/ionSideMenuContainer.html

@@ -0,0 +1,3 @@
+<template name="ionSideMenuContainer">
+  {{> UI.contentBlock}}
+</template>

components/ionSideMenuContainer/ionSideMenuContainer.js

@@ -0,0 +1,40 @@
+Template.ionSideMenuContainer.rendered = function () {
+  $snapperEl = this.$('.snap-content');
+  if (!$snapperEl) {
+    return;
+  }
+
+  this.snapper = new Snap({
+    element: $snapperEl.get(0)
+  });
+};
+
+Template.ionSideMenuContainer.events({
+  'click [data-ion-menu-toggle]': function (event, template) {
+    if (!template.snapper) {
+      return;
+    }
+
+    var direction;
+    var $el = $(event.target);
+
+    if ($el.data('ion-menu-toggle') !== '') {
+      direction = $el.data('ion-menu-toggle');
+    } else {
+      direction = 'left';
+    }
+
+    if(template.snapper.state().state === direction){
+      template.snapper.close();
+    } else {
+      template.snapper.open(direction);
+    }
+  },
+
+  'click [data-ion-menu-close]': function (event, template) {
+    if (!template.snapper) {
+      return;
+    }
+    template.snapper.close();
+  }
+});

components/ionSideMenuContent/ionSideMenuContent.html

@@ -0,0 +1,5 @@
+<template name="ionSideMenuContent">
+  <div class="{{classes}}">
+    {{> UI.contentBlock}}
+  </div>
+</template>

components/ionSideMenuContent/ionSideMenuContent.js

@@ -0,0 +1,6 @@
+Template.ionSideMenuContent.helpers({
+  classes: function () {
+    var classes = ['menu-content', 'snap-content', 'pane'];
+    return classes.join(' ');
+  }
+});

components/ionSideMenus/ionSideMenus.html

@@ -0,0 +1,5 @@
+<template name="ionSideMenus">
+  <div class="{{classes}}">
+    {{> UI.contentBlock}}
+  </div>
+</template>

components/ionSideMenus/ionSideMenus.js

@@ -0,0 +1,6 @@
+Template.ionSideMenus.helpers({
+  classes: function () {
+    var classes = ['view', 'snap-drawers'];
+    return classes.join(' ');
+  }
+});

package.js

@@ -8,6 +8,12 @@ Package.describe({
 Package.onUse(function(api) {
   api.versionsFrom("1.0");
   api.use(["templating", "underscore"], "client");
+
+  api.addFiles([
+    "vendor/snap.js",
+    "vendor/snap.css"
+  ], "client");
+
   api.addFiles([
     "components/ionBody/ionBody.html",
     "components/ionBody/ionBody.js",
@@ -42,6 +48,18 @@ Package.onUse(function(api) {
     "components/ionRadio/ionRadio.html",
     "components/ionRadio/ionRadio.js",
 
+    "components/ionSideMenu/ionSideMenu.html",
+    "components/ionSideMenu/ionSideMenu.js",
+
+    "components/ionSideMenuContainer/ionSideMenuContainer.html",
+    "components/ionSideMenuContainer/ionSideMenuContainer.js",
+
+    "components/ionSideMenuContent/ionSideMenuContent.html",
+    "components/ionSideMenuContent/ionSideMenuContent.js",
+
+    "components/ionSideMenus/ionSideMenus.html",
+    "components/ionSideMenus/ionSideMenus.js",
+
     "components/ionSubheaderBar/ionSubheaderBar.html",
     "components/ionSubheaderBar/ionSubheaderBar.js",
 

showcase/client/templates/sideMenu/sideMenu.html

@@ -1,14 +1,60 @@
 <template name="sideMenu">
-  {{#ionHeaderBar class="bar-positive"}}
-    <a href="{{pathFor 'index'}}" class="button button-clear pull-left">
-      {{> ionIcon icon='ios-arrow-back'}}
-    </a>
-    <h1 class="title">Side Menu</h1>
-  {{/ionHeaderBar}}
-
-  {{#ionContent}}
-    <div class="padding">
-      Content goes here
-    </div>
-  {{/ionContent}}
+
+  {{#ionSideMenuContainer}}
+
+    {{#ionSideMenus}}
+
+      {{#ionSideMenu}}
+        <div class="bar bar-header bar-dark">
+          <h1 class="title">Left Menu</h1>
+        </div>
+        <div class="content has-header">
+          <div class="list">
+            <div class="item item-icon-right" data-ion-menu-close>
+              Close Me {{> ionIcon icon="ios-arrow-right"}}
+            </div>
+          </div>
+        </div>
+      {{/ionSideMenu}}
+
+      {{#ionSideMenu side="right"}}
+        <div class="bar bar-header bar-dark">
+          <h1 class="title">Right Menu</h1>
+        </div>
+        <div class="content has-header">
+          <div class="list">
+            <div class="item item-icon-left" data-ion-menu-close>
+              {{> ionIcon icon="ios-arrow-left"}} Close Me
+            </div>
+          </div>
+        </div>
+      {{/ionSideMenu}}
+
+    {{/ionSideMenus}}
+
+    {{#ionSideMenuContent}}
+
+      {{#ionHeaderBar class="bar-positive"}}
+        <button class="button button-clear pull-left" data-ion-menu-toggle="left">
+          {{> ionIcon icon='navicon'}}
+        </button>
+        <h1 class="title">Side Menu</h1>
+        <button class="button button-clear pull-right" data-ion-menu-toggle="right">
+          {{> ionIcon icon='navicon'}}
+        </button>
+      {{/ionHeaderBar}}
+
+      {{#ionContent}}
+        <div class="padding">
+          <a href="{{pathFor 'index'}}" class="button button-large button-stable">
+            {{> ionIcon icon='ios-arrow-back'}}
+            Back to Showcase
+          </a>
+        </div>
+      {{/ionContent}}
+
+    {{/ionSideMenuContent}}
+
+  {{/ionSideMenuContainer}}
+
 </template>

vendor/snap.css

@@ -0,0 +1,64 @@
+.snap-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  z-index: 2;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.snap-drawers {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+}
+
+.snap-drawer {
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+  width: 265px;
+  height: auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -webkit-transition: width 0.3s ease;
+  -moz-transition: width 0.3s ease;
+  -ms-transition: width 0.3s ease;
+  -o-transition: width 0.3s ease;
+  transition: width 0.3s ease;
+}
+
+.snap-drawer-left {
+  left: 0;
+  z-index: 1;
+}
+
+.snap-drawer-right {
+  right: 0;
+  z-index: 1;
+}
+
+.snapjs-left .snap-drawer-right,
+.snapjs-right .snap-drawer-left {
+  display: none;
+}
+
+.snapjs-expand-left .snap-drawer-left,
+.snapjs-expand-right .snap-drawer-right {
+  width: 100%;
+}