Create single line lists

src/components/mdAvatar/index.js

@@ -0,0 +1,5 @@
+import mdAvatar from './mdAvatar.vue';
+
+export default function install(Vue) {
+  Vue.component('md-avatar', Vue.extend(mdAvatar));
+}

src/components/mdAvatar/mdAvatar.scss

@@ -0,0 +1,23 @@
+@import '../../core/variables.scss';
+
+$avatar-size: 40px;
+
+.md-avatar {
+  width: $avatar-size;
+  min-width: $avatar-size;
+  height: $avatar-size;
+  min-height: $avatar-size;
+  margin: auto;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: $avatar-size;
+  vertical-align: middle;
+
+  &.md-avatar-icon {
+    background-color: rgba(#000, .2);
+  }
+
+  .md-icon {
+    margin: 8px;
+  }
+}

src/components/mdAvatar/mdAvatar.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="md-avatar">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./mdAvatar.scss"></style>

src/components/mdList/index.js

@@ -0,0 +1,10 @@
+import mdList from './mdList.vue';
+import mdListItem from './mdListItem.vue';
+import mdListTheme from './mdList.theme';
+
+export default function install(Vue) {
+  Vue.component('md-list', Vue.extend(mdList));
+  Vue.component('md-list-item', Vue.extend(mdListItem));
+
+  window.VueMaterial.styles.push(mdListTheme);
+}

src/components/mdList/mdList.scss

@@ -0,0 +1,62 @@
+@import '../../core/variables.scss';
+
+.md-list {
+  margin: 0;
+  padding: 8px 0;
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+  list-style: none;
+
+  &.md-dense {
+    padding: 4px 0;
+
+    .md-list-item {
+      min-height: 40px;
+      padding: 4px 16px;
+      font-size: 13px;
+    }
+  }
+}
+
+.md-list-item {
+  min-height: 48px;
+  position: relative;
+  font-size: 16px;
+
+  .md-list-item-container {
+    width: 100%;
+    margin: 0;
+    padding: 8px 16px;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    border-radius: 0;
+    text-align: left;
+
+    > .md-ink-ripple {
+      border-radius: 0;
+    }
+
+    > .md-icon:first-child {
+      margin-right: 32px;
+    }
+
+    > .md-avatar:first-child {
+      margin-right: 16px;
+    }
+
+    > .md-list-action {
+      margin: 0 0 0 16px;
+    }
+  }
+
+  .md-icon,
+  .md-avatar {
+    margin: 0;
+
+    + * {
+      flex: 1;
+    }
+  }
+}

src/components/mdList/mdList.theme

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

src/components/mdList/mdList.vue

@@ -0,0 +1,7 @@
+<template>
+  <ul class="md-list">
+    <slot></slot>
+  </ul>
+</template>
+
+<style lang="scss" src="./mdList.scss"></style>

src/components/mdList/mdListItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <li class="md-list-item">
+    <md-link-button :title="title" :target="target" :href="href" class="md-list-item-container" v-if="href">
+      <slot></slot>
+    </md-link-button>
+
+    <md-button :title="title" class="md-list-item-container" v-else>
+      <slot></slot>
+    </md-button>
+  </li>
+</template>
+
+<script>
+  export default {
+    props: {
+      href: String,
+      title: String,
+      target: String
+    }
+  };
+</script>

src/components/mdSidenav/mdSidenav.scss

@@ -12,7 +12,7 @@
   }
 
   .md-sidenav-content {
-    width: 320px;
+    width: 304px;
     position: absolute;
     top: 0;
     bottom: 0;

src/docs.vue

@@ -231,18 +231,18 @@
     </section>
 
     <section>
-      <h2 class="title">Toolbar</h2>
+      <h2 class="title">Sidenav</h2>
 
       <div class="cell-phone">
         <md-toolbar>
-          <md-button class="md-icon-button" @click="toggleSidenav">
+          <md-button class="md-icon-button" @click="toggleLeftSidenav">
             <md-icon>menu</md-icon>
           </md-button>
 
-          <h2 class="md-title">Toggle Sidenav</h2>
+          <h2 class="md-title">Left Sidenav</h2>
         </md-toolbar>
 
-        <md-sidenav class="md-left md-fixed" :md-visible.sync="sidenavVisible">
+        <md-sidenav class="md-left md-fixed" :md-visible.sync="sidenavLeftVisible">
           <md-toolbar class="md-extended">
             <div class="md-toolbar-container">
               <h3 class="md-title">Sidenav content</h3>
@@ -252,6 +252,78 @@
           <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>
+
+      <div class="cell-phone">
+        <md-toolbar>
+          <md-button class="md-icon-button" @click="toggleRightSidenav">
+            <md-icon>menu</md-icon>
+          </md-button>
+
+          <h2 class="md-title">Right Sidenav</h2>
+        </md-toolbar>
+
+        <md-sidenav class="md-right md-fixed" :md-visible.sync="sidenavRightVisible">
+          <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>
+
+    <section>
+      <h2 class="title">Lists</h2>
+
+      <div class="cell-phone">
+        <md-list>
+          <md-list-item>
+            <md-icon>home</md-icon> <span>Home</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>favorite</md-icon> <span>Favorites</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>store</md-icon> <span>Store</span>
+          </md-list-item>
+        </md-list>
+      </div>
+
+      <div class="cell-phone">
+        <md-list>
+          <md-list-item href="http://google.com">
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/1" alt="People">
+            </md-avatar>
+
+            <span>Home</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/5" alt="People">
+            </md-avatar>
+
+            <span>Favorites</span>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon>file_download</md-icon>
+            </md-button>
+          </md-list-item>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/3" alt="People">
+            </md-avatar>
+
+            <span>Store</span>
+          </md-list-item>
+        </md-list>
+      </div>
     </section>
   </div>
 </template>
@@ -263,15 +335,19 @@
     data() {
       return {
         buttonDisabled: false,
-        sidenavVisible: false
+        sidenavLeftVisible: false,
+        sidenavRightVisible: false
       };
     },
     methods: {
       disableButton() {
         this.buttonDisabled = !this.buttonDisabled;
       },
-      toggleSidenav() {
-        this.sidenavVisible = !this.sidenavVisible;
+      toggleLeftSidenav() {
+        this.sidenavLeftVisible = !this.sidenavLeftVisible;
+      },
+      toggleRightSidenav() {
+        this.sidenavRightVisible = !this.sidenavRightVisible;
       }
     }
   };

src/main.js

@@ -9,6 +9,8 @@ import MdIcon from './components/mdIcon';
 import MdBottomBar from './components/mdBottomBar';
 import MdToolbar from './components/mdToolbar';
 import MdSidenav from './components/mdSidenav';
+import MdAvatar from './components/mdAvatar';
+import MdList from './components/mdList';
 
 Vue.use(MdInkRipple);
 Vue.use(MdButton);
@@ -17,6 +19,8 @@ Vue.use(MdIcon);
 Vue.use(MdBottomBar);
 Vue.use(MdToolbar);
 Vue.use(MdSidenav);
+Vue.use(MdAvatar);
+Vue.use(MdList);
 
 Vue.use(MdTheme, {
   'bottom-bar': {