Create sidenav

src/components/mdBottomBar/mdBottomBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-bottom-bar" v-bind:class="classes">
+  <div class="md-bottom-bar" :class="classes">
     <slot></slot>
   </div>
 </template>

src/components/mdSidenav/index.js

@@ -0,0 +1,8 @@
+import mdSidenav from './mdSidenav.vue';
+import mdSidenavTheme from './mdSidenav.theme';
+
+export default function install(Vue) {
+  Vue.component('md-sidenav', Vue.extend(mdSidenav));
+
+  window.VueMaterial.styles.push(mdSidenavTheme);
+}

src/components/mdSidenav/mdSidenav.scss

@@ -0,0 +1,50 @@
+@import '../../core/variables.scss';
+
+.md-sidenav {
+  &.md-left .md-sidenav-content {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &.md-right .md-sidenav-content {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  .md-sidenav-content {
+    width: 320px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+    pointer-events: none;
+    opacity: .7;
+    transition: $swift-ease-out;
+
+    &.md-active {
+      opacity: 1;
+      pointer-events: auto;
+      box-shadow: $material-shadow-16dp;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .md-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    pointer-events: none;
+    background-color: rgba(#000, .54);
+    transform: translate3d(0, 0, 0);
+    opacity: 0;
+    transition: $swift-ease-in-out;
+
+    &.md-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}

src/components/mdSidenav/mdSidenav.theme

@@ -0,0 +1,9 @@
+.THEME_NAME {
+  .md-sidenav,
+  &.md-sidenav {
+    .md-sidenav-content {
+      background-color: BACKGROUND-COLOR-50;
+      color: BACKGROUND-CONTRAST;
+    }
+  }
+}

src/components/mdSidenav/mdSidenav.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="md-sidenav" @keyup.esc="hide" tabindex="0">
+    <div class="md-sidenav-content" :class="classes">
+      <slot></slot>
+    </div>
+
+    <div class="md-backdrop" :class="classes" @click="hide"></div>
+  </div>
+</template>
+
+<style lang="scss" src="./mdSidenav.scss"></style>
+
+<script>
+  export default {
+    props: {
+      mdVisible: Boolean
+    },
+    computed: {
+      classes() {
+        return this.mdVisible && 'md-active';
+      }
+    },
+    watch: {
+      mdVisible(value) {
+        if (value) {
+          this.$el.focus();
+        } else {
+          this.$el.blur();
+        }
+      }
+    },
+    methods: {
+      show() {
+        this.mdVisible = true;
+      },
+      hide() {
+        this.mdVisible = false;
+      },
+      toggle() {
+        this.mdVisible = !this.visible;
+      }
+    }
+  };
+</script>

src/components/mdTheme/index.js

@@ -22,7 +22,7 @@ const createNewStyleElement = (style, name) => {
     newTag.id = styleId;
     newTag.textContent = style;
 
-    document.head.appendChild(newTag);
+    head.appendChild(newTag);
   }
 };
 

src/docs.vue

@@ -3,12 +3,12 @@
     <section>
       <h2 class="title">Buttons</h2>
 
-      <md-button @click="clickAction">Button</md-button>
-      <md-link-button class="md-primary" :disabled="disabled">Primary</md-link-button>
+      <md-button @click="disableButton">Button</md-button>
+      <md-link-button class="md-primary" :disabled="buttonDisabled">Primary</md-link-button>
       <md-link-button class="md-primary md-raised">Raised</md-link-button>
       <md-button class="md-accent md-raised">Accent</md-button>
       <md-link-button class="md-warn">Warn</md-link-button>
-      <md-link-button class="md-raised md-primary" :disabled="!disabled">Disabled</md-link-button>
+      <md-link-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-link-button>
       <md-button class="md-raised md-dense md-accent">Dense</md-button>
     </section>
 
@@ -229,6 +229,30 @@
         </div>
       </md-toolbar>
     </section>
+
+    <section>
+      <h2 class="title">Toolbar</h2>
+
+      <div class="cell-phone">
+        <md-toolbar>
+          <md-button class="md-icon-button" @click="toggleSidenav">
+            <md-icon>menu</md-icon>
+          </md-button>
+
+          <h2 class="md-title">Toggle Sidenav</h2>
+        </md-toolbar>
+
+        <md-sidenav class="md-left md-fixed" :md-visible.sync="sidenavVisible">
+          <md-toolbar class="md-extended">
+            <div class="md-toolbar-container">
+              <h3 class="md-title">Sidenav content</h3>
+            </div>
+          </md-toolbar>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!</p>
+        </md-sidenav>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -238,12 +262,16 @@
   export default {
     data() {
       return {
-        disabled: false
+        buttonDisabled: false,
+        sidenavVisible: false
       };
     },
     methods: {
-      clickAction() {
-        this.disabled = !this.disabled;
+      disableButton() {
+        this.buttonDisabled = !this.buttonDisabled;
+      },
+      toggleSidenav() {
+        this.sidenavVisible = !this.sidenavVisible;
       }
     }
   };

src/main.js

@@ -7,14 +7,16 @@ import MdButton from './components/mdButton';
 import MdButtonToggle from './components/mdButtonToggle';
 import MdIcon from './components/mdIcon';
 import MdBottomBar from './components/mdBottomBar';
-import mdToolbar from './components/mdToolbar';
+import MdToolbar from './components/mdToolbar';
+import MdSidenav from './components/mdSidenav';
 
 Vue.use(MdInkRipple);
 Vue.use(MdButton);
 Vue.use(MdButtonToggle);
 Vue.use(MdIcon);
 Vue.use(MdBottomBar);
-Vue.use(mdToolbar);
+Vue.use(MdToolbar);
+Vue.use(MdSidenav);
 
 Vue.use(MdTheme, {
   'bottom-bar': {