From 20675ec9054d85cec1e2a00684a561726083ee98 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 28 Nov 2016 15:01:09 -0200
Subject: [PATCH] create toolbar documentation with the new template

---
 docs/src/pages/components/Toolbar.vue | 1183 +++++++++++++++++--------
 1 file changed, 831 insertions(+), 352 deletions(-)

diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
index 807544a..567ca60 100644
--- a/docs/src/pages/components/Toolbar.vue
+++ b/docs/src/pages/components/Toolbar.vue
@@ -1,441 +1,880 @@
 <template>
-  <demo-page label="Components - Toolbar">
-    <div slot="examples">
-      <demo-example label="Default">
-        <md-toolbar>
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
+  <page-content page-title="Components - Toolbar">
+    <docs-component>
+      <div slot="description">
+        <p>Toolbars appear a step above the content they affect. They may constrain their width to accommodate material passing over them.</p>
+        <p>You need to wrap all the elements of your toolbar in a element with the class <code>md-toolbar-container</code> for medium and large toolbars. On large toolbars you can have two containers to push content to bottom.</p>
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+          <li><code>md-transparent</code></li>
+        </ul>
+      </div>
 
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
+      <div slot="api">
+        <api-table name="md-toolbar">
+          <md-table slot="classes">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
 
-          <md-button class="md-icon-button">
-            <md-icon>favorite</md-icon>
-          </md-button>
-        </md-toolbar>
-      </demo-example>
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-dense</md-table-cell>
+                <md-table-cell>Create a small and dense toolbar.</md-table-cell>
+              </md-table-row>
 
-      <demo-example label="Dense">
-        <md-toolbar class="md-dense">
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
+              <md-table-row>
+                <md-table-cell>md-medium</md-table-cell>
+                <md-table-cell>Create a medium.</md-table-cell>
+              </md-table-row>
 
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
+              <md-table-row>
+                <md-table-cell>md-large</md-table-cell>
+                <md-table-cell>Create a large.</md-table-cell>
+              </md-table-row>
 
-          <md-button class="md-icon-button">
-            <md-icon>favorite</md-icon>
-          </md-button>
-        </md-toolbar>
-      </demo-example>
+              <md-table-row>
+                <md-table-cell>md-account-header</md-table-cell>
+                <md-table-cell>Create a account header toolbar to show user accounts inside sidenav. See example below and the complete example</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
 
-      <demo-example label="Medium">
-        <md-toolbar class="md-medium">
-          <div class="md-toolbar-container">
-            <md-button class="md-icon-button">
-              <md-icon>menu</md-icon>
-            </md-button>
+        <api-table name="md-account-header">
+          <code-block lang="xml">
+            &lt;md-toolbar class=&quot;md-account-header&quot;&gt;
+              &lt;md-list class=&quot;md-transparent&quot;&gt;
+                &lt;md-list-item class=&quot;md-avatar-list&quot;&gt;
+                  &lt;md-avatar class=&quot;md-large&quot;&gt;
+                    &lt;img src=&quot;https://placeimg.com/64/64/people/8&quot; alt=&quot;People&quot;&gt;
+                  &lt;/md-avatar&gt;
 
-            <h2 class="md-title" style="flex: 1;">Vue Material</h2>
+                  &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
 
-            <md-button class="md-icon-button">
-              <md-icon>search</md-icon>
-            </md-button>
+                  &lt;md-avatar&gt;
+                    &lt;img src=&quot;https://placeimg.com/40/40/people/3&quot; alt=&quot;People&quot;&gt;
+                  &lt;/md-avatar&gt;
 
-            <md-button class="md-icon-button">
-              <md-icon>filter_list</md-icon>
-            </md-button>
-          </div>
-        </md-toolbar>
-      </demo-example>
+                  &lt;md-avatar&gt;
+                    &lt;img src=&quot;https://placeimg.com/40/40/people/4&quot; alt=&quot;People&quot;&gt;
+                  &lt;/md-avatar&gt;
+                &lt;/md-list-item&gt;
 
-      <demo-example label="Large">
-        <md-toolbar class="md-large">
-          <div class="md-toolbar-container">
-            <md-button class="md-icon-button">
-              <md-icon>menu</md-icon>
-            </md-button>
+                &lt;md-list-item&gt;
+                  &lt;div class=&quot;md-list-text-container&quot;&gt;
+                    &lt;span&gt;John Doe&lt;/span&gt;
+                    &lt;span&gt;johndoe@email.com&lt;/span&gt;
+                  &lt;/div&gt;
 
-            <span style="flex: 1;"></span>
+                  &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                    &lt;md-icon&gt;arrow_drop_down&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+                &lt;/md-list-item&gt;
+              &lt;/md-list&gt;
+            &lt;/md-toolbar&gt;
+          </code-block>
+        </api-table>
+      </div>
 
-            <md-button class="md-icon-button">
-              <md-icon>search</md-icon>
-            </md-button>
+      <div slot="example">
+        <example-box card-title="Sizes">
+          <div slot="demo">
+            <md-toolbar>
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
 
-            <md-button class="md-icon-button">
-              <md-icon>filter_list</md-icon>
-            </md-button>
+              <h2 class="md-title" style="flex: 1">Default</h2>
+
+              <md-button class="md-icon-button">
+                <md-icon>favorite</md-icon>
+              </md-button>
+            </md-toolbar>
+
+            <md-toolbar class="md-dense">
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
+
+              <h2 class="md-title" style="flex: 1">Dense</h2>
+
+              <md-button class="md-icon-button">
+                <md-icon>favorite</md-icon>
+              </md-button>
+            </md-toolbar>
+
+            <md-toolbar class="md-medium">
+              <div class="md-toolbar-container">
+                <md-button class="md-icon-button">
+                  <md-icon>menu</md-icon>
+                </md-button>
+
+                <h2 class="md-title" style="flex: 1;">Medium</h2>
+
+                <md-button class="md-icon-button">
+                  <md-icon>search</md-icon>
+                </md-button>
+
+                <md-button class="md-icon-button">
+                  <md-icon>filter_list</md-icon>
+                </md-button>
+              </div>
+            </md-toolbar>
+
+            <md-toolbar class="md-large">
+              <div class="md-toolbar-container">
+                <md-button class="md-icon-button">
+                  <md-icon>menu</md-icon>
+                </md-button>
+
+                <span style="flex: 1;"></span>
+
+                <md-button class="md-icon-button">
+                  <md-icon>search</md-icon>
+                </md-button>
+
+                <md-button class="md-icon-button">
+                  <md-icon>filter_list</md-icon>
+                </md-button>
+              </div>
+
+              <div class="md-toolbar-container">
+                <h2 class="md-title">Large</h2>
+              </div>
+            </md-toolbar>
           </div>
 
-          <div class="md-toolbar-container">
-            <h2 class="md-title">Vue Material</h2>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-toolbar&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Default&lt;/h2&gt;
+
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar class=&quot;md-dense&quot;&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Dense&lt;/h2&gt;
+
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar class=&quot;md-medium&quot;&gt;
+                &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1;&quot;&gt;Medium&lt;/h2&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;search&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+                &lt;/div&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar class=&quot;md-large&quot;&gt;
+                &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;search&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+                &lt;/div&gt;
+
+                &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                  &lt;h2 class=&quot;md-title&quot;&gt;Large&lt;/h2&gt;
+                &lt;/div&gt;
+              &lt;/md-toolbar&gt;
+            </code-block>
           </div>
-        </md-toolbar>
-      </demo-example>
+        </example-box>
 
-      <demo-example label="Accent, Warn and Transparent Colors">
-        <md-toolbar class="md-accent">
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
+        <example-box card-title="Palettes">
+          <div slot="demo">
+            <md-toolbar class="md-accent">
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
 
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
+              <h2 class="md-title" style="flex: 1">Vue Material</h2>
 
-          <md-button class="md-icon-button">
-            <md-icon>favorite</md-icon>
-          </md-button>
-        </md-toolbar>
+              <md-button class="md-icon-button">
+                <md-icon>favorite</md-icon>
+              </md-button>
+            </md-toolbar>
 
-        <md-toolbar class="md-warn">
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
+            <md-toolbar class="md-warn">
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
 
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
+              <h2 class="md-title" style="flex: 1">Vue Material</h2>
 
-          <md-button>Add</md-button>
-          <md-button>Remove</md-button>
-        </md-toolbar>
+              <md-button>Add</md-button>
+              <md-button>Remove</md-button>
+            </md-toolbar>
 
-        <md-toolbar class="md-transparent">
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
+            <md-toolbar class="md-transparent">
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
 
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
+              <h2 class="md-title" style="flex: 1">Vue Material</h2>
 
-          <md-button class="md-raised">Add</md-button>
-          <md-button class="md-raised md-warn">Remove</md-button>
-        </md-toolbar>
-      </demo-example>
-
-      <demo-example label="Themed">
-        <md-toolbar v-md-theme="'green'">
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
-
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
-
-          <md-button class="md-icon-button">
-            <md-icon>favorite</md-icon>
-          </md-button>
-        </md-toolbar>
-
-        <md-toolbar class="md-large" v-md-theme="'brown'">
-          <div class="md-toolbar-container">
-            <md-button class="md-icon-button">
-              <md-icon>menu</md-icon>
-            </md-button>
-
-            <span style="flex: 1;"></span>
-
-            <md-button class="md-icon-button">
-              <md-icon>search</md-icon>
-            </md-button>
-
-            <md-button class="md-icon-button">
-              <md-icon>filter_list</md-icon>
-            </md-button>
+              <md-button class="md-raised">Add</md-button>
+              <md-button class="md-raised md-warn">Remove</md-button>
+            </md-toolbar>
           </div>
 
-          <div class="md-toolbar-container">
-            <h2 class="md-title">Vue Material</h2>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-toolbar class=&quot;md-accent&quot;&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar class=&quot;md-warn&quot;&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+                &lt;md-button&gt;Add&lt;/md-button&gt;
+                &lt;md-button&gt;Remove&lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar class=&quot;md-transparent&quot;&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+                &lt;md-button class=&quot;md-raised&quot;&gt;Add&lt;/md-button&gt;
+                &lt;md-button class=&quot;md-raised md-warn&quot;&gt;Remove&lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+            </code-block>
           </div>
-        </md-toolbar>
+        </example-box>
 
-        <md-toolbar v-md-theme="'orange'">
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
+        <example-box card-title="Themes">
+          <div slot="demo">
+            <md-toolbar v-md-theme="'green'">
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
 
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
+              <h2 class="md-title" style="flex: 1">Vue Material</h2>
 
-          <md-button>Add</md-button>
-          <md-button>Remove</md-button>
-        </md-toolbar>
+              <md-button class="md-icon-button">
+                <md-icon>favorite</md-icon>
+              </md-button>
+            </md-toolbar>
 
-        <md-toolbar v-md-theme="'blue'">
-          <md-button class="md-icon-button">
-            <md-icon>menu</md-icon>
-          </md-button>
+            <md-toolbar class="md-large" v-md-theme="'brown'">
+              <div class="md-toolbar-container">
+                <md-button class="md-icon-button">
+                  <md-icon>menu</md-icon>
+                </md-button>
 
-          <h2 class="md-title" style="flex: 1">Vue Material</h2>
+                <span style="flex: 1;"></span>
 
-          <md-button class="md-raised">Add</md-button>
-          <md-button class="md-raised md-warn">Remove</md-button>
-        </md-toolbar>
-      </demo-example>
+                <md-button class="md-icon-button">
+                  <md-icon>search</md-icon>
+                </md-button>
 
-      <demo-example label="Complete Example" class="example">
-        <md-toolbar class="md-large" v-md-theme="'green'">
-          <div class="md-toolbar-container">
-            <md-button class="md-icon-button">
-              <md-icon>menu</md-icon>
-            </md-button>
+                <md-button class="md-icon-button">
+                  <md-icon>filter_list</md-icon>
+                </md-button>
+              </div>
 
-            <span style="flex: 1;"></span>
+              <div class="md-toolbar-container">
+                <h2 class="md-title">Vue Material</h2>
+              </div>
+            </md-toolbar>
 
-            <md-button class="md-icon-button">
-              <md-icon>search</md-icon>
-            </md-button>
+            <md-toolbar v-md-theme="'orange'">
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
 
-            <md-button class="md-icon-button">
-              <md-icon>filter_list</md-icon>
-            </md-button>
+              <h2 class="md-title" style="flex: 1">Vue Material</h2>
+
+              <md-button>Add</md-button>
+              <md-button>Remove</md-button>
+            </md-toolbar>
+
+            <md-toolbar v-md-theme="'blue'">
+              <md-button class="md-icon-button">
+                <md-icon>menu</md-icon>
+              </md-button>
+
+              <h2 class="md-title" style="flex: 1">Vue Material</h2>
+
+              <md-button class="md-raised">Add</md-button>
+              <md-button class="md-raised md-warn">Remove</md-button>
+            </md-toolbar>
           </div>
 
-          <div class="md-toolbar-container">
-            <h2 class="md-title">Vue Material</h2>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-toolbar v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
 
-            <md-button class="md-fab md-fab-bottom-right">
-              <md-icon>add</md-icon>
-            </md-button>
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
+                &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;search&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+                &lt;/div&gt;
+
+                &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                  &lt;h2 class=&quot;md-title&quot;&gt;Vue Material&lt;/h2&gt;
+                &lt;/div&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+                &lt;md-button&gt;Add&lt;/md-button&gt;
+                &lt;md-button&gt;Remove&lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+
+              &lt;md-toolbar v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+                &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                  &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+                &lt;md-button class=&quot;md-raised&quot;&gt;Add&lt;/md-button&gt;
+                &lt;md-button class=&quot;md-raised md-warn&quot;&gt;Remove&lt;/md-button&gt;
+              &lt;/md-toolbar&gt;
+            </code-block>
           </div>
-        </md-toolbar>
-      </demo-example>
-    </div>
+        </example-box>
 
-    <div slot="code">
-      <demo-example label="Default">
-        <code-block lang="xml">
-&lt;md-toolbar&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+        <example-box card-title="Complete example">
+          <div slot="demo">
+            <div class="phone-viewport complete-example">
+              <md-whiteframe md-elevation="2">
+                <md-toolbar class="md-large" v-md-theme="'light-blue'">
+                  <div class="md-toolbar-container">
+                    <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
+                      <md-icon>menu</md-icon>
+                    </md-button>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                    <span style="flex: 1"></span>
 
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
-  &lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
-      </demo-example>
+                    <md-button class="md-icon-button">
+                      <md-icon>search</md-icon>
+                    </md-button>
 
-      <demo-example label="Dense">
-        <code-block lang="xml">
-&lt;md-toolbar class=&quot;md-dense&quot;&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+                    <md-button class="md-icon-button">
+                      <md-icon>view_module</md-icon>
+                    </md-button>
+                  </div>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                  <div class="md-toolbar-container">
+                    <h2 class="md-title">My Files</h2>
 
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
-  &lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
-      </demo-example>
+                    <md-button class="md-fab md-mini">
+                      <md-icon>add</md-icon>
+                    </md-button>
+                  </div>
+                </md-toolbar>
+              </md-whiteframe>
 
-      <demo-example label="Medium">
-        <code-block lang="xml">
-&lt;md-toolbar class=&quot;md-medium&quot;&gt;
-  &lt;div class=&quot;md-toolbar-container&quot;&gt;
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;menu&lt;/md-icon&gt;
-    &lt;/md-button&gt;
+              <md-list class="md-double-line">
+                <md-subheader class="md-inset">Folders</md-subheader>
 
-    &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1;&quot;&gt;Vue Material&lt;/h2&gt;
+                <md-list-item>
+                  <md-avatar class="md-avatar-icon">
+                    <md-icon>folder</md-icon>
+                  </md-avatar>
 
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;search&lt;/md-icon&gt;
-    &lt;/md-button&gt;
+                  <div class="md-list-text-container">
+                    <span>Photos</span>
+                    <p>Jan 9, 2014</p>
+                  </div>
 
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
-    &lt;/md-button&gt;
-  &lt;/div&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
-      </demo-example>
+                  <md-button class="md-icon-button md-list-action">
+                    <md-icon>info</md-icon>
+                  </md-button>
+                </md-list-item>
 
-      <demo-example label="Large">
-        <code-block lang="xml">
-&lt;md-toolbar class=&quot;md-large&quot;&gt;
-  &lt;div class=&quot;md-toolbar-container&quot;&gt;
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;menu&lt;/md-icon&gt;
-    &lt;/md-button&gt;
+                <md-list-item>
+                  <md-avatar class="md-avatar-icon">
+                    <md-icon>folder</md-icon>
+                  </md-avatar>
 
-    &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+                  <div class="md-list-text-container">
+                    <span>Recipes</span>
+                    <p>Jan 17, 2014</p>
+                  </div>
 
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;search&lt;/md-icon&gt;
-    &lt;/md-button&gt;
+                  <md-button class="md-icon-button md-list-action">
+                    <md-icon>info</md-icon>
+                  </md-button>
+                </md-list-item>
 
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
-    &lt;/md-button&gt;
-  &lt;/div&gt;
+                <md-list-item>
+                  <md-avatar class="md-avatar-icon">
+                    <md-icon>folder</md-icon>
+                  </md-avatar>
 
-  &lt;div class=&quot;md-toolbar-container&quot;&gt;
-    &lt;h2 class=&quot;md-title&quot;&gt;Vue Material&lt;/h2&gt;
-  &lt;/div&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
-      </demo-example>
+                  <div class="md-list-text-container">
+                    <span>Work</span>
+                    <p>Jan 28, 2014</p>
+                  </div>
 
-      <demo-example label="Accent, Warn and Transparent Colors">
-        <code-block lang="xml">
-&lt;md-toolbar class=&quot;md-accent&quot;&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+                  <md-button class="md-icon-button md-list-action">
+                    <md-icon>info</md-icon>
+                  </md-button>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                  <md-divider class="md-inset"></md-divider>
+                </md-list-item>
 
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
-  &lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
+                <md-subheader class="md-inset">Files</md-subheader>
 
-        <code-block lang="xml">
-&lt;md-toolbar class=&quot;md-warn&quot;&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+                <md-list-item>
+                  <md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
+                    <md-icon>insert_drive_file</md-icon>
+                  </md-avatar>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                  <div class="md-list-text-container">
+                    <span>Vacation Itinerary</span>
+                    <p>Jan 20, 2014</p>
+                  </div>
 
-  &lt;md-button&gt;Add&lt;/md-button&gt;
-  &lt;md-button&gt;Remove&lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
+                  <md-button class="md-icon-button md-list-action">
+                    <md-icon>info</md-icon>
+                  </md-button>
+                </md-list-item>
 
-        <code-block lang="xml">
-&lt;md-toolbar class=&quot;md-transparent&quot;&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+                <md-list-item>
+                  <md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
+                    <md-icon>collections</md-icon>
+                  </md-avatar>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                  <div class="md-list-text-container">
+                    <span>Kitchen Remodel</span>
+                    <p>Jan 10, 2014</p>
+                  </div>
 
-  &lt;md-button class=&quot;md-raised&quot;&gt;Add&lt;/md-button&gt;
-  &lt;md-button class=&quot;md-raised md-warn&quot;&gt;Remove&lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
-      </demo-example>
+                  <md-button class="md-icon-button md-list-action">
+                    <md-icon>info</md-icon>
+                  </md-button>
+                </md-list-item>
 
-      <demo-example label="Themed">
-        <code-block lang="xml">
-&lt;md-toolbar v-md-theme=&quot;&#039;green&#039;&quot;&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+                <md-list-item>
+                  <md-avatar v-md-theme="'green'" class="md-avatar-icon md-primary">
+                    <md-icon>view_list</md-icon>
+                  </md-avatar>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                  <div class="md-list-text-container">
+                    <span>Grocery Shop</span>
+                    <p>Jan 10, 2014</p>
+                  </div>
 
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
-  &lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
+                  <md-button class="md-icon-button md-list-action">
+                    <md-icon>info</md-icon>
+                  </md-button>
+                </md-list-item>
 
-        <code-block lang="xml">
-&lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
-  &lt;div class=&quot;md-toolbar-container&quot;&gt;
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;menu&lt;/md-icon&gt;
-    &lt;/md-button&gt;
+                <md-list-item>
+                  <md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
+                    <md-icon>collections</md-icon>
+                  </md-avatar>
 
-    &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+                  <div class="md-list-text-container">
+                    <span>Weekend Pictures</span>
+                    <p>Jan 10, 2014</p>
+                  </div>
 
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;search&lt;/md-icon&gt;
-    &lt;/md-button&gt;
+                  <md-button class="md-icon-button md-list-action">
+                    <md-icon>info</md-icon>
+                  </md-button>
+                </md-list-item>
+              </md-list>
 
-    &lt;md-button class=&quot;md-icon-button&quot;&gt;
-      &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
-    &lt;/md-button&gt;
-  &lt;/div&gt;
+              <md-sidenav class="md-left" ref="sidenav">
+                <md-toolbar class="md-account-header" v-md-theme="'blue'">
+                  <md-list class="md-transparent">
+                    <md-list-item class="md-avatar-list">
+                      <md-avatar class="md-large">
+                        <img src="https://placeimg.com/64/64/people/8" alt="People">
+                      </md-avatar>
 
-  &lt;div class=&quot;md-toolbar-container&quot;&gt;
-    &lt;h2 class=&quot;md-title&quot;&gt;Vue Material&lt;/h2&gt;
-  &lt;/div&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
+                      <span style="flex: 1"></span>
 
-        <code-block lang="xml">
-&lt;md-toolbar v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+                      <md-avatar>
+                        <img src="https://placeimg.com/40/40/people/3" alt="People">
+                      </md-avatar>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                      <md-avatar>
+                        <img src="https://placeimg.com/40/40/people/4" alt="People">
+                      </md-avatar>
+                    </md-list-item>
 
-  &lt;md-button&gt;Add&lt;/md-button&gt;
-  &lt;md-button&gt;Remove&lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
+                    <md-list-item>
+                      <div class="md-list-text-container">
+                        <span>John Doe</span>
+                        <span>johndoe@email.com</span>
+                      </div>
 
-        <code-block lang="xml">
-&lt;md-toolbar v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
-  &lt;md-button class=&quot;md-icon-button&quot;&gt;
-    &lt;md-icon&gt;menu&lt;/md-icon&gt;
-  &lt;/md-button&gt;
+                      <md-button class="md-icon-button md-list-action">
+                        <md-icon>arrow_drop_down</md-icon>
+                      </md-button>
+                    </md-list-item>
+                  </md-list>
+                </md-toolbar>
 
-  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+                <md-list v-md-theme="'blue'">
+                  <md-list-item @click="$refs.sidenav.toggle()" class="md-primary">
+                    <md-icon>insert_drive_file</md-icon> <span>My files</span>
+                  </md-list-item>
 
-  &lt;md-button class=&quot;md-raised&quot;&gt;Add&lt;/md-button&gt;
-  &lt;md-button class=&quot;md-raised md-warn&quot;&gt;Remove&lt;/md-button&gt;
-&lt;/md-toolbar&gt;
-        </code-block>
-      </demo-example>
+                  <md-list-item @click="$refs.sidenav.toggle()">
+                    <md-icon>people</md-icon> <span>Shared with me</span>
+                  </md-list-item>
 
-      <demo-example label="Complete Example" class="example">
-        <code-block lang="xml">
-&lt;div class=&quot;example&quot;&gt;
-  &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;
-    &lt;div class=&quot;md-toolbar-container&quot;&gt;
-      &lt;md-button class=&quot;md-icon-button&quot;&gt;
-        &lt;md-icon&gt;menu&lt;/md-icon&gt;
-      &lt;/md-button&gt;
+                  <md-list-item @click="$refs.sidenav.toggle()">
+                    <md-icon>access_time</md-icon> <span>Recent</span>
+                  </md-list-item>
 
-      &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+                  <md-list-item @click="$refs.sidenav.toggle()">
+                    <md-icon>start</md-icon> <span>Starred</span>
+                  </md-list-item>
 
-      &lt;md-button class=&quot;md-icon-button&quot;&gt;
-        &lt;md-icon&gt;search&lt;/md-icon&gt;
-      &lt;/md-button&gt;
+                  <md-list-item @click="$refs.sidenav.toggle()">
+                    <md-icon>delete</md-icon> <span>Trash</span>
+                  </md-list-item>
+                </md-list>
+              </md-sidenav>
+            </div>
+          </div>
 
-      &lt;md-button class=&quot;md-icon-button&quot;&gt;
-        &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
-      &lt;/md-button&gt;
-    &lt;/div&gt;
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div class=&quot;phone-viewport complete-example&quot;&gt;
+                &lt;md-whiteframe md-elevation=&quot;2&quot;&gt;
+                  &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
+                    &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                      &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                        &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
 
-    &lt;div class=&quot;md-toolbar-container&quot;&gt;
-      &lt;h2 class=&quot;md-title&quot;&gt;Vue Material&lt;/h2&gt;
+                      &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
 
-      &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot;&gt;
-        &lt;md-icon&gt;add&lt;/md-icon&gt;
-      &lt;/md-button&gt;
-    &lt;/div&gt;
-  &lt;/md-toolbar&gt;
-&lt;/div&gt;
-        </code-block>
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;search&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
 
-        <code-block lang="scss">
-.example {
-  .md-button.md-fab {
-    margin: 0;
-    right: 56px;
-    bottom: -26px;
-  }
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;view_module&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+                    &lt;/div&gt;
 
-  .md-toolbar {
-    margin-bottom: 50px;
-  }
-}
-        </code-block>
-      </demo-example>
-    </div>
+                    &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                      &lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
 
-    <div slot="api">
+                      &lt;md-button class=&quot;md-fab md-mini&quot;&gt;
+                        &lt;md-icon&gt;add&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+                    &lt;/div&gt;
+                  &lt;/md-toolbar&gt;
+                &lt;/md-whiteframe&gt;
 
-    </div>
-  </demo-page>
+                &lt;md-list class=&quot;md-double-line&quot;&gt;
+                  &lt;md-subheader class=&quot;md-inset&quot;&gt;Folders&lt;/md-subheader&gt;
+
+                  &lt;md-list-item&gt;
+                    &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+                      &lt;md-icon&gt;folder&lt;/md-icon&gt;
+                    &lt;/md-avatar&gt;
+
+                    &lt;div class=&quot;md-list-text-container&quot;&gt;
+                      &lt;span&gt;Photos&lt;/span&gt;
+                      &lt;p&gt;Jan 9, 2014&lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                      &lt;md-icon&gt;info&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/md-list-item&gt;
+
+                  &lt;md-list-item&gt;
+                    &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+                      &lt;md-icon&gt;folder&lt;/md-icon&gt;
+                    &lt;/md-avatar&gt;
+
+                    &lt;div class=&quot;md-list-text-container&quot;&gt;
+                      &lt;span&gt;Recipes&lt;/span&gt;
+                      &lt;p&gt;Jan 17, 2014&lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                      &lt;md-icon&gt;info&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/md-list-item&gt;
+
+                  &lt;md-list-item&gt;
+                    &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+                      &lt;md-icon&gt;folder&lt;/md-icon&gt;
+                    &lt;/md-avatar&gt;
+
+                    &lt;div class=&quot;md-list-text-container&quot;&gt;
+                      &lt;span&gt;Work&lt;/span&gt;
+                      &lt;p&gt;Jan 28, 2014&lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                      &lt;md-icon&gt;info&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+
+                    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+                  &lt;/md-list-item&gt;
+
+                  &lt;md-subheader class=&quot;md-inset&quot;&gt;Files&lt;/md-subheader&gt;
+
+                  &lt;md-list-item&gt;
+                    &lt;md-avatar v-md-theme=&quot;&#039;blue&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                      &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt;
+                    &lt;/md-avatar&gt;
+
+                    &lt;div class=&quot;md-list-text-container&quot;&gt;
+                      &lt;span&gt;Vacation Itinerary&lt;/span&gt;
+                      &lt;p&gt;Jan 20, 2014&lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                      &lt;md-icon&gt;info&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/md-list-item&gt;
+
+                  &lt;md-list-item&gt;
+                    &lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                      &lt;md-icon&gt;collections&lt;/md-icon&gt;
+                    &lt;/md-avatar&gt;
+
+                    &lt;div class=&quot;md-list-text-container&quot;&gt;
+                      &lt;span&gt;Kitchen Remodel&lt;/span&gt;
+                      &lt;p&gt;Jan 10, 2014&lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                      &lt;md-icon&gt;info&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/md-list-item&gt;
+
+                  &lt;md-list-item&gt;
+                    &lt;md-avatar v-md-theme=&quot;&#039;green&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                      &lt;md-icon&gt;view_list&lt;/md-icon&gt;
+                    &lt;/md-avatar&gt;
+
+                    &lt;div class=&quot;md-list-text-container&quot;&gt;
+                      &lt;span&gt;Grocery Shop&lt;/span&gt;
+                      &lt;p&gt;Jan 10, 2014&lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                      &lt;md-icon&gt;info&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/md-list-item&gt;
+
+                  &lt;md-list-item&gt;
+                    &lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                      &lt;md-icon&gt;collections&lt;/md-icon&gt;
+                    &lt;/md-avatar&gt;
+
+                    &lt;div class=&quot;md-list-text-container&quot;&gt;
+                      &lt;span&gt;Weekend Pictures&lt;/span&gt;
+                      &lt;p&gt;Jan 10, 2014&lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                      &lt;md-icon&gt;info&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/md-list-item&gt;
+                &lt;/md-list&gt;
+
+                &lt;md-sidenav class=&quot;md-left&quot; ref=&quot;sidenav&quot;&gt;
+                  &lt;md-toolbar class=&quot;md-account-header&quot; v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+                    &lt;md-list class=&quot;md-transparent&quot;&gt;
+                      &lt;md-list-item class=&quot;md-avatar-list&quot;&gt;
+                        &lt;md-avatar class=&quot;md-large&quot;&gt;
+                          &lt;img src=&quot;https://placeimg.com/64/64/people/8&quot; alt=&quot;People&quot;&gt;
+                        &lt;/md-avatar&gt;
+
+                        &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
+
+                        &lt;md-avatar&gt;
+                          &lt;img src=&quot;https://placeimg.com/40/40/people/3&quot; alt=&quot;People&quot;&gt;
+                        &lt;/md-avatar&gt;
+
+                        &lt;md-avatar&gt;
+                          &lt;img src=&quot;https://placeimg.com/40/40/people/4&quot; alt=&quot;People&quot;&gt;
+                        &lt;/md-avatar&gt;
+                      &lt;/md-list-item&gt;
+
+                      &lt;md-list-item&gt;
+                        &lt;div class=&quot;md-list-text-container&quot;&gt;
+                          &lt;span&gt;John Doe&lt;/span&gt;
+                          &lt;span&gt;johndoe@email.com&lt;/span&gt;
+                        &lt;/div&gt;
+
+                        &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                          &lt;md-icon&gt;arrow_drop_down&lt;/md-icon&gt;
+                        &lt;/md-button&gt;
+                      &lt;/md-list-item&gt;
+                    &lt;/md-list&gt;
+                  &lt;/md-toolbar&gt;
+
+                  &lt;md-list v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
+                      &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt; &lt;span&gt;My files&lt;/span&gt;
+                    &lt;/md-list-item&gt;
+
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                      &lt;md-icon&gt;people&lt;/md-icon&gt; &lt;span&gt;Shared with me&lt;/span&gt;
+                    &lt;/md-list-item&gt;
+
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                      &lt;md-icon&gt;access_time&lt;/md-icon&gt; &lt;span&gt;Recent&lt;/span&gt;
+                    &lt;/md-list-item&gt;
+
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                      &lt;md-icon&gt;start&lt;/md-icon&gt; &lt;span&gt;Starred&lt;/span&gt;
+                    &lt;/md-list-item&gt;
+
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                      &lt;md-icon&gt;delete&lt;/md-icon&gt; &lt;span&gt;Trash&lt;/span&gt;
+                    &lt;/md-list-item&gt;
+                  &lt;/md-list&gt;
+                &lt;/md-sidenav&gt;
+              &lt;/div&gt;
+            </code-block>
+
+            <code-block lang="scss">
+              .complete-example {
+                height: 540px;
+                display: flex;
+                flex-flow: column;
+                position: relative;
+                overflow: hidden;
+                z-index: 1;
+
+                .md-fab {
+                  margin: 0;
+                  position: absolute;
+                  bottom: -20px;
+                  left: 16px;
+                }
+
+                .md-toolbar {
+                  .md-icon {
+                    color: #014e70;
+                  }
+                }
+
+                .md-title {
+                  color: #fff;
+                }
+
+                .md-list {
+                  overflow: auto;
+                }
+
+                .md-list-action .md-icon {
+                  color: rgba(#000, .26);
+                }
+
+                .md-avatar-icon .md-icon {
+                  color: #fff !important;
+                }
+
+                .md-sidenav .md-list-text-container > :nth-child(2) {
+                  color: rgba(#fff, .54);
+                }
+
+                .md-account-header {
+                  .md-list-item:hover .md-button:hover {
+                    background-color: inherit;
+                  }
+
+                  .md-avatar-list .md-list-item-container:hover {
+                    background: none !important;
+                  }
+                }
+              }
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
 </template>
 
 <style lang="scss" scoped>
@@ -443,15 +882,55 @@
     margin-top: 16px;
   }
 
-  .example {
-    .md-button.md-fab {
+  .complete-example {
+    height: 540px;
+    display: flex;
+    flex-flow: column;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+
+    .md-fab {
       margin: 0;
-      right: 56px;
-      bottom: -26px;
+      position: absolute;
+      bottom: -20px;
+      left: 16px;
     }
 
     .md-toolbar {
-      margin-bottom: 50px;
+      .md-icon {
+        color: #014e70;
+      }
+    }
+
+    .md-title {
+      color: #fff;
+    }
+
+    .md-list {
+      overflow: auto;
+    }
+
+    .md-list-action .md-icon {
+      color: rgba(#000, .26);
+    }
+
+    .md-avatar-icon .md-icon {
+      color: #fff !important;
+    }
+
+    .md-sidenav .md-list-text-container > :nth-child(2) {
+      color: rgba(#fff, .54);
+    }
+
+    .md-account-header {
+      .md-list-item:hover .md-button:hover {
+        background-color: inherit;
+      }
+
+      .md-avatar-list .md-list-item-container:hover {
+        background: none !important;
+      }
     }
   }
 </style>