From a1476461f0d416439532fa3cd8b9887a272ee2b0 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 26 Sep 2016 00:27:16 -0300
Subject: [PATCH] Create navigation items

---
 src/docs/App.vue                              | 182 ++++++++++------
 src/docs/pages/About.vue                      |  13 ++
 src/docs/pages/GettingStarted.vue             |  13 ++
 src/docs/pages/{Home.vue => Introduction.vue} |   0
 src/docs/pages/Theme.vue                      |   3 -
 src/docs/pages/{ => components}/Avatar.vue    |   2 +-
 src/docs/pages/{ => components}/BottomBar.vue |   2 +-
 .../pages/{ => components}/ButtonToggle.vue   |   2 +-
 src/docs/pages/{ => components}/Buttons.vue   |   2 +-
 src/docs/pages/{ => components}/Checkbox.vue  |   2 +-
 src/docs/pages/{ => components}/Icon.vue      |   2 +-
 src/docs/pages/{ => components}/Input.vue     |   2 +-
 src/docs/pages/{ => components}/List.vue      |   4 +-
 src/docs/pages/{ => components}/Radio.vue     |   2 +-
 src/docs/pages/{ => components}/Ripple.vue    |   2 +-
 src/docs/pages/{ => components}/Select.vue    |   2 +-
 src/docs/pages/{ => components}/Sidenav.vue   |   2 +-
 src/docs/pages/{ => components}/Subheader.vue |   2 +-
 src/docs/pages/{ => components}/Switch.vue    |   2 +-
 src/docs/pages/{ => components}/Tabs.vue      |   2 +-
 src/docs/pages/{ => components}/Toolbar.vue   |   2 +-
 src/docs/pages/{ => components}/Tooltip.vue   |   2 +-
 .../pages/{ => components}/Whiteframe.vue     |   2 +-
 src/docs/pages/themes/Configuration.vue       |  13 ++
 src/docs/pages/themes/DynamicThemes.vue       |  13 ++
 src/docs/pages/ui-elements/GridSystem.vue     |  13 ++
 src/docs/pages/ui-elements/Typography.vue     |  13 ++
 src/docs/routes.js                            | 194 ++++++++++++------
 28 files changed, 346 insertions(+), 149 deletions(-)
 create mode 100644 src/docs/pages/About.vue
 create mode 100644 src/docs/pages/GettingStarted.vue
 rename src/docs/pages/{Home.vue => Introduction.vue} (100%)
 delete mode 100644 src/docs/pages/Theme.vue
 rename src/docs/pages/{ => components}/Avatar.vue (96%)
 rename src/docs/pages/{ => components}/BottomBar.vue (98%)
 rename src/docs/pages/{ => components}/ButtonToggle.vue (99%)
 rename src/docs/pages/{ => components}/Buttons.vue (99%)
 rename src/docs/pages/{ => components}/Checkbox.vue (97%)
 rename src/docs/pages/{ => components}/Icon.vue (94%)
 rename src/docs/pages/{ => components}/Input.vue (98%)
 rename src/docs/pages/{ => components}/List.vue (99%)
 rename src/docs/pages/{ => components}/Radio.vue (99%)
 rename src/docs/pages/{ => components}/Ripple.vue (95%)
 rename src/docs/pages/{ => components}/Select.vue (98%)
 rename src/docs/pages/{ => components}/Sidenav.vue (97%)
 rename src/docs/pages/{ => components}/Subheader.vue (98%)
 rename src/docs/pages/{ => components}/Switch.vue (97%)
 rename src/docs/pages/{ => components}/Tabs.vue (99%)
 rename src/docs/pages/{ => components}/Toolbar.vue (99%)
 rename src/docs/pages/{ => components}/Tooltip.vue (97%)
 rename src/docs/pages/{ => components}/Whiteframe.vue (97%)
 create mode 100644 src/docs/pages/themes/Configuration.vue
 create mode 100644 src/docs/pages/themes/DynamicThemes.vue
 create mode 100644 src/docs/pages/ui-elements/GridSystem.vue
 create mode 100644 src/docs/pages/ui-elements/Typography.vue

diff --git a/src/docs/App.vue b/src/docs/App.vue
index be6b726..593a66d 100644
--- a/src/docs/App.vue
+++ b/src/docs/App.vue
@@ -8,83 +8,133 @@
         </router-link>
       </md-toolbar>
 
-      <md-list>
-        <md-list-item>
-          <router-link to="/avatar">Avatar</router-link>
-        </md-list-item>
+      <div class="main-sidebar-links">
+        <md-list class="md-dense">
+          <md-list-item>
+            <router-link to="/">Introduction</router-link>
+          </md-list-item>
 
-        <md-list-item>
-          <router-link to="/bottom-bar">Bottom Bar</router-link>
-        </md-list-item>
+          <md-list-item>
+            <router-link to="/getting-started">Getting Started</router-link>
+          </md-list-item>
 
-        <md-list-item>
-          <router-link to="/button">Button</router-link>
-        </md-list-item>
+          <md-list-item>
+            <span>Components</span>
 
-        <md-list-item>
-          <router-link to="/button-toggle">Button Toggle</router-link>
-        </md-list-item>
+            <md-list-expand>
+              <md-list>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/avatar">Avatar</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/checkbox">Checkbox</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/bottom-bar">Bottom Bar</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/icon">Icon</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/button">Button</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/input">Input</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/button-toggle">Button Toggle</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/list">List</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/checkbox">Checkbox</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/radio">Radio</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/icon">Icon</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/ripple">Ripple</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/input">Input</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/select">Select</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/list">List</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/sidenav">Sidenav</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/radio">Radio</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/subheader">Subheader</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/ripple">Ripple</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/switch">Switch</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/select">Select</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/tabs">Tabs</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/sidenav">Sidenav</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/theme">Theme</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/subheader">Subheader</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/toolbar">Toolbar</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/switch">Switch</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/tooltip">Tooltip</router-link>
-        </md-list-item>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/tabs">Tabs</router-link>
+                </md-list-item>
 
-        <md-list-item>
-          <router-link to="/whiteframe">Whiteframe</router-link>
-        </md-list-item>
-      </md-list>
+                <md-list-item class="md-inset">
+                  <router-link to="/components/toolbar">Toolbar</router-link>
+                </md-list-item>
+
+                <md-list-item class="md-inset">
+                  <router-link to="/components/tooltip">Tooltip</router-link>
+                </md-list-item>
+
+                <md-list-item class="md-inset">
+                  <router-link to="/components/whiteframe">Whiteframe</router-link>
+                </md-list-item>
+              </md-list>
+            </md-list-expand>
+          </md-list-item>
+
+          <md-list-item>
+            <span>UI Elements</span>
+
+            <md-list-expand>
+              <md-list>
+                <md-list-item class="md-inset">
+                  <router-link to="/ui-elements/typography">Typography</router-link>
+                </md-list-item>
+
+                <md-list-item class="md-inset">
+                  <router-link to="/ui-elements/grid-system">Grid System</router-link>
+                </md-list-item>
+              </md-list>
+            </md-list-expand>
+          </md-list-item>
+
+          <md-list-item>
+            <span>Themes</span>
+
+            <md-list-expand>
+              <md-list>
+                <md-list-item class="md-inset">
+                  <router-link to="/themes/configuration">Configuration</router-link>
+                </md-list-item>
+
+                <md-list-item class="md-inset">
+                  <router-link to="/themes/dynamic-themes">Dynamic Theme</router-link>
+                </md-list-item>
+              </md-list>
+            </md-list-expand>
+          </md-list-item>
+
+          <md-list-item>
+            <router-link to="/about">About</router-link>
+          </md-list-item>
+        </md-list>
+      </div>
     </md-sidenav>
 
     <md-toolbar class="main-header">
@@ -186,7 +236,7 @@
     }
 
     .md-toolbar {
-      height: 172px;
+      min-height: 172px;
       border-bottom: 1px solid rgba(#000, .12);
     }
 
@@ -208,9 +258,17 @@
       }
     }
 
-    .md-list {
+    .main-sidebar-links {
       overflow: auto;
-      flex: 1;
+
+      .md-inset .md-list-item-container {
+        padding-left: 36px;
+      }
+
+      .md-list-item-container {
+        font-size: 14px;
+        font-weight: 500;
+      }
     }
   }
 
diff --git a/src/docs/pages/About.vue b/src/docs/pages/About.vue
new file mode 100644
index 0000000..51d4a27
--- /dev/null
+++ b/src/docs/pages/About.vue
@@ -0,0 +1,13 @@
+<template>
+  <section>
+    <h1>About</h1>
+  </section>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'About';
+    }
+  };
+</script>
diff --git a/src/docs/pages/GettingStarted.vue b/src/docs/pages/GettingStarted.vue
new file mode 100644
index 0000000..0d185b8
--- /dev/null
+++ b/src/docs/pages/GettingStarted.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="page-content">
+    <h1>Getting Started</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Getting Started';
+    }
+  };
+</script>
diff --git a/src/docs/pages/Home.vue b/src/docs/pages/Introduction.vue
similarity index 100%
rename from src/docs/pages/Home.vue
rename to src/docs/pages/Introduction.vue
diff --git a/src/docs/pages/Theme.vue b/src/docs/pages/Theme.vue
deleted file mode 100644
index f6ec357..0000000
--- a/src/docs/pages/Theme.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Theme</div>
-</template>
diff --git a/src/docs/pages/Avatar.vue b/src/docs/pages/components/Avatar.vue
similarity index 96%
rename from src/docs/pages/Avatar.vue
rename to src/docs/pages/components/Avatar.vue
index aab3efd..cf47d76 100644
--- a/src/docs/pages/Avatar.vue
+++ b/src/docs/pages/components/Avatar.vue
@@ -59,7 +59,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Avatar';
+      this.$root.pageTitle = 'Components - Avatar';
     }
   };
 </script>
diff --git a/src/docs/pages/BottomBar.vue b/src/docs/pages/components/BottomBar.vue
similarity index 98%
rename from src/docs/pages/BottomBar.vue
rename to src/docs/pages/components/BottomBar.vue
index c8c5970..4dc4364 100644
--- a/src/docs/pages/BottomBar.vue
+++ b/src/docs/pages/components/BottomBar.vue
@@ -141,7 +141,7 @@
       }
     },
     mounted() {
-      this.$root.pageTitle = 'Bottom Bar';
+      this.$root.pageTitle = 'Components - Bottom Bar';
     }
   };
 </script>
diff --git a/src/docs/pages/ButtonToggle.vue b/src/docs/pages/components/ButtonToggle.vue
similarity index 99%
rename from src/docs/pages/ButtonToggle.vue
rename to src/docs/pages/components/ButtonToggle.vue
index 6445624..0dc9612 100644
--- a/src/docs/pages/ButtonToggle.vue
+++ b/src/docs/pages/components/ButtonToggle.vue
@@ -219,7 +219,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Buttom Toggle';
+      this.$root.pageTitle = 'Components - Buttom Toggle';
     }
   };
 </script>
diff --git a/src/docs/pages/Buttons.vue b/src/docs/pages/components/Buttons.vue
similarity index 99%
rename from src/docs/pages/Buttons.vue
rename to src/docs/pages/components/Buttons.vue
index abc1363..608e733 100644
--- a/src/docs/pages/Buttons.vue
+++ b/src/docs/pages/components/Buttons.vue
@@ -163,7 +163,7 @@
       }
     },
     mounted() {
-      this.$root.pageTitle = 'Button';
+      this.$root.pageTitle = 'Components - Button';
     }
   };
 </script>
diff --git a/src/docs/pages/Checkbox.vue b/src/docs/pages/components/Checkbox.vue
similarity index 97%
rename from src/docs/pages/Checkbox.vue
rename to src/docs/pages/components/Checkbox.vue
index d6a2965..0405b74 100644
--- a/src/docs/pages/Checkbox.vue
+++ b/src/docs/pages/components/Checkbox.vue
@@ -56,7 +56,7 @@
       };
     },
     mounted() {
-      this.$root.pageTitle = 'Checkbox';
+      this.$root.pageTitle = 'Components - Checkbox';
     }
   };
 </script>
diff --git a/src/docs/pages/Icon.vue b/src/docs/pages/components/Icon.vue
similarity index 94%
rename from src/docs/pages/Icon.vue
rename to src/docs/pages/components/Icon.vue
index 507a4b6..3b8a9da 100644
--- a/src/docs/pages/Icon.vue
+++ b/src/docs/pages/components/Icon.vue
@@ -29,7 +29,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Icon';
+      this.$root.pageTitle = 'Components - Icon';
     }
   };
 </script>
diff --git a/src/docs/pages/Input.vue b/src/docs/pages/components/Input.vue
similarity index 98%
rename from src/docs/pages/Input.vue
rename to src/docs/pages/components/Input.vue
index 31eb668..90fd874 100644
--- a/src/docs/pages/Input.vue
+++ b/src/docs/pages/components/Input.vue
@@ -124,7 +124,7 @@
       };
     },
     mounted() {
-      this.$root.pageTitle = 'Input';
+      this.$root.pageTitle = 'Components - Input';
     }
   };
 </script>
diff --git a/src/docs/pages/List.vue b/src/docs/pages/components/List.vue
similarity index 99%
rename from src/docs/pages/List.vue
rename to src/docs/pages/components/List.vue
index af1d414..2dc3bdf 100644
--- a/src/docs/pages/List.vue
+++ b/src/docs/pages/components/List.vue
@@ -630,7 +630,7 @@
 </template>
 
 <style lang="scss">
-  @import '../../core/stylesheets/variables.scss';
+  @import '../../../core/stylesheets/variables.scss';
 
   .phone-viewport {
     width: 360px;
@@ -724,7 +724,7 @@
       }
     },
     mounted() {
-      this.$root.pageTitle = 'List';
+      this.$root.pageTitle = 'Components - List';
     }
   };
 </script>
diff --git a/src/docs/pages/Radio.vue b/src/docs/pages/components/Radio.vue
similarity index 99%
rename from src/docs/pages/Radio.vue
rename to src/docs/pages/components/Radio.vue
index 72350e8..915bc58 100644
--- a/src/docs/pages/Radio.vue
+++ b/src/docs/pages/components/Radio.vue
@@ -85,7 +85,7 @@
       };
     },
     mounted() {
-      this.$root.pageTitle = 'Radio';
+      this.$root.pageTitle = 'Components - Radio';
     }
   };
 </script>
diff --git a/src/docs/pages/Ripple.vue b/src/docs/pages/components/Ripple.vue
similarity index 95%
rename from src/docs/pages/Ripple.vue
rename to src/docs/pages/components/Ripple.vue
index f676286..df9abad 100644
--- a/src/docs/pages/Ripple.vue
+++ b/src/docs/pages/components/Ripple.vue
@@ -51,7 +51,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Ripple';
+      this.$root.pageTitle = 'Components - Ripple';
     }
   };
 </script>
diff --git a/src/docs/pages/Select.vue b/src/docs/pages/components/Select.vue
similarity index 98%
rename from src/docs/pages/Select.vue
rename to src/docs/pages/components/Select.vue
index 7165935..82ad277 100644
--- a/src/docs/pages/Select.vue
+++ b/src/docs/pages/components/Select.vue
@@ -104,7 +104,7 @@
       };
     },
     mounted() {
-      this.$root.pageTitle = 'Select';
+      this.$root.pageTitle = 'Components - Select';
     }
   };
 </script>
diff --git a/src/docs/pages/Sidenav.vue b/src/docs/pages/components/Sidenav.vue
similarity index 97%
rename from src/docs/pages/Sidenav.vue
rename to src/docs/pages/components/Sidenav.vue
index 14165a6..eae4a41 100644
--- a/src/docs/pages/Sidenav.vue
+++ b/src/docs/pages/components/Sidenav.vue
@@ -75,7 +75,7 @@
       }
     },
     mounted() {
-      this.$root.pageTitle = 'Sidenav';
+      this.$root.pageTitle = 'Components - Sidenav';
     }
   };
 </script>
diff --git a/src/docs/pages/Subheader.vue b/src/docs/pages/components/Subheader.vue
similarity index 98%
rename from src/docs/pages/Subheader.vue
rename to src/docs/pages/components/Subheader.vue
index 042a697..67870d3 100644
--- a/src/docs/pages/Subheader.vue
+++ b/src/docs/pages/components/Subheader.vue
@@ -157,7 +157,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Subheader';
+      this.$root.pageTitle = 'Components - Subheader';
     }
   };
 </script>
diff --git a/src/docs/pages/Switch.vue b/src/docs/pages/components/Switch.vue
similarity index 97%
rename from src/docs/pages/Switch.vue
rename to src/docs/pages/components/Switch.vue
index e28eaf4..7f896df 100644
--- a/src/docs/pages/Switch.vue
+++ b/src/docs/pages/components/Switch.vue
@@ -63,7 +63,7 @@
       };
     },
     mounted() {
-      this.$root.pageTitle = 'Switch';
+      this.$root.pageTitle = 'Components - Switch';
     }
   };
 </script>
diff --git a/src/docs/pages/Tabs.vue b/src/docs/pages/components/Tabs.vue
similarity index 99%
rename from src/docs/pages/Tabs.vue
rename to src/docs/pages/components/Tabs.vue
index 982dbeb..d5786e7 100644
--- a/src/docs/pages/Tabs.vue
+++ b/src/docs/pages/components/Tabs.vue
@@ -217,7 +217,7 @@
       };
     },
     mounted() {
-      this.$root.pageTitle = 'Tabs';
+      this.$root.pageTitle = 'Components - Tabs';
     }
   };
 </script>
diff --git a/src/docs/pages/Toolbar.vue b/src/docs/pages/components/Toolbar.vue
similarity index 99%
rename from src/docs/pages/Toolbar.vue
rename to src/docs/pages/components/Toolbar.vue
index 860dd5e..c83c95c 100644
--- a/src/docs/pages/Toolbar.vue
+++ b/src/docs/pages/components/Toolbar.vue
@@ -227,7 +227,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Toolbar';
+      this.$root.pageTitle = 'Components - Toolbar';
     }
   };
 </script>
diff --git a/src/docs/pages/Tooltip.vue b/src/docs/pages/components/Tooltip.vue
similarity index 97%
rename from src/docs/pages/Tooltip.vue
rename to src/docs/pages/components/Tooltip.vue
index c1385d9..d831e1a 100644
--- a/src/docs/pages/Tooltip.vue
+++ b/src/docs/pages/components/Tooltip.vue
@@ -74,7 +74,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Tooltip';
+      this.$root.pageTitle = 'Components - Tooltip';
     }
   };
 </script>
diff --git a/src/docs/pages/Whiteframe.vue b/src/docs/pages/components/Whiteframe.vue
similarity index 97%
rename from src/docs/pages/Whiteframe.vue
rename to src/docs/pages/components/Whiteframe.vue
index 7b7c20a..dc69469 100644
--- a/src/docs/pages/Whiteframe.vue
+++ b/src/docs/pages/components/Whiteframe.vue
@@ -57,7 +57,7 @@
 <script>
   export default {
     mounted() {
-      this.$root.pageTitle = 'Whiteframe';
+      this.$root.pageTitle = 'Components - Whiteframe';
     }
   };
 </script>
diff --git a/src/docs/pages/themes/Configuration.vue b/src/docs/pages/themes/Configuration.vue
new file mode 100644
index 0000000..de194b0
--- /dev/null
+++ b/src/docs/pages/themes/Configuration.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="page-content">
+    <h1>Configuration</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Themes - Configuration';
+    }
+  };
+</script>
diff --git a/src/docs/pages/themes/DynamicThemes.vue b/src/docs/pages/themes/DynamicThemes.vue
new file mode 100644
index 0000000..f89b5d7
--- /dev/null
+++ b/src/docs/pages/themes/DynamicThemes.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="page-content">
+    <h1>Dynamic Themes</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Themes - Dynamic Themes';
+    }
+  };
+</script>
diff --git a/src/docs/pages/ui-elements/GridSystem.vue b/src/docs/pages/ui-elements/GridSystem.vue
new file mode 100644
index 0000000..a3e9662
--- /dev/null
+++ b/src/docs/pages/ui-elements/GridSystem.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="page-content">
+    <h1>Grid System</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Themes - Grid System';
+    }
+  };
+</script>
diff --git a/src/docs/pages/ui-elements/Typography.vue b/src/docs/pages/ui-elements/Typography.vue
new file mode 100644
index 0000000..d7d6d8c
--- /dev/null
+++ b/src/docs/pages/ui-elements/Typography.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="page-content">
+    <h1>Typography</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Themes - Typography';
+    }
+  };
+</script>
diff --git a/src/docs/routes.js b/src/docs/routes.js
index 03fb23c..52c78f2 100644
--- a/src/docs/routes.js
+++ b/src/docs/routes.js
@@ -1,126 +1,190 @@
-import Home from './pages/Home';
+/* main */
+import Introduction from './pages/Introduction';
+import GettingStarted from './pages/GettingStarted';
+import About from './pages/About';
 import Error404 from './pages/Error';
-import Avatar from './pages/Avatar';
-import BottomBar from './pages/BottomBar';
-import Buttons from './pages/Buttons';
-import ButtonToggle from './pages/ButtonToggle';
-import Checkbox from './pages/Checkbox';
-import Icon from './pages/Icon';
-import Input from './pages/Input';
-import List from './pages/List';
-import Radio from './pages/Radio';
-import Ripple from './pages/Ripple';
-import Select from './pages/Select';
-import Sidenav from './pages/Sidenav';
-import Subheader from './pages/Subheader';
-import Switch from './pages/Switch';
-import Tabs from './pages/Tabs';
-import Theme from './pages/Theme';
-import Toolbar from './pages/Toolbar';
-import Tooltip from './pages/Tooltip';
-import Whiteframe from './pages/Whiteframe';
 
-const routes = [
+/* Components */
+import Avatar from './pages/components/Avatar';
+import BottomBar from './pages/components/BottomBar';
+import Buttons from './pages/components/Buttons';
+import ButtonToggle from './pages/components/ButtonToggle';
+import Checkbox from './pages/components/Checkbox';
+import Icon from './pages/components/Icon';
+import Input from './pages/components/Input';
+import List from './pages/components/List';
+import Radio from './pages/components/Radio';
+import Ripple from './pages/components/Ripple';
+import Select from './pages/components/Select';
+import Sidenav from './pages/components/Sidenav';
+import Subheader from './pages/components/Subheader';
+import Switch from './pages/components/Switch';
+import Tabs from './pages/components/Tabs';
+import Toolbar from './pages/components/Toolbar';
+import Tooltip from './pages/components/Tooltip';
+import Whiteframe from './pages/components/Whiteframe';
+
+/* UI Elements */
+import Typography from './pages/ui-elements/Typography';
+import GridSystem from './pages/ui-elements/GridSystem';
+
+/* Themes */
+import Configuration from './pages/themes/Configuration';
+import DynamicThemes from './pages/themes/DynamicThemes';
+
+const main = [
   {
     path: '/',
-    name: 'home',
-    component: Home
+    name: 'introduction',
+    component: Introduction
   },
   {
-    path: '/avatar',
-    name: 'avatar',
+    path: '/getting-started',
+    name: 'getting-started',
+    component: GettingStarted
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: About
+  }
+];
+
+const components = [
+  {
+    path: '/components',
+    name: 'components',
+    redirect: '/components/avatar'
+  },
+  {
+    path: '/components/avatar',
+    name: 'components:avatar',
     component: Avatar
   },
   {
-    path: '/bottom-bar',
-    name: 'bottom-bar',
+    path: '/components/bottom-bar',
+    name: 'components:bottom-bar',
     component: BottomBar
   },
   {
-    path: '/button',
-    name: 'button',
+    path: '/components/button',
+    name: 'components:button',
     component: Buttons
   },
   {
-    path: '/button-toggle',
-    name: 'button-toggle',
+    path: '/components/button-toggle',
+    name: 'components:button-toggle',
     component: ButtonToggle
   },
   {
-    path: '/checkbox',
-    name: 'checkbox',
+    path: '/components/checkbox',
+    name: 'components:checkbox',
     component: Checkbox
   },
   {
-    path: '/icon',
-    name: 'icon',
+    path: '/components/icon',
+    name: 'components:icon',
     component: Icon
   },
   {
-    path: '/input',
-    name: 'input',
+    path: '/components/input',
+    name: 'components:input',
     component: Input
   },
   {
-    path: '/list',
-    name: 'list',
+    path: '/components/list',
+    name: 'components:list',
     component: List
   },
   {
-    path: '/radio',
-    name: 'radio',
+    path: '/components/radio',
+    name: 'components:radio',
     component: Radio
   },
   {
-    path: '/ripple',
-    name: 'ripple',
+    path: '/components/ripple',
+    name: 'components:ripple',
     component: Ripple
   },
   {
-    path: '/select',
-    name: 'select',
+    path: '/components/select',
+    name: 'components:select',
     component: Select
   },
   {
-    path: '/sidenav',
-    name: 'sidenav',
+    path: '/components/sidenav',
+    name: 'components:sidenav',
     component: Sidenav
   },
   {
-    path: '/switch',
-    name: 'switch',
+    path: '/components/switch',
+    name: 'components:switch',
     component: Switch
   },
   {
-    path: '/subheader',
-    name: 'subheader',
+    path: '/components/subheader',
+    name: 'components:subheader',
     component: Subheader
   },
   {
-    path: '/tabs',
-    name: 'tabs',
+    path: '/components/tabs',
+    name: 'components:tabs',
     component: Tabs
   },
   {
-    path: '/theme',
-    name: 'theme',
-    component: Theme
-  },
-  {
-    path: '/toolbar',
-    name: 'toolbar',
+    path: '/components/toolbar',
+    name: 'components:toolbar',
     component: Toolbar
   },
   {
-    path: '/tooltip',
-    name: 'tooltip',
+    path: '/components/tooltip',
+    name: 'components:tooltip',
     component: Tooltip
   },
   {
-    path: '/whiteframe',
-    name: 'whiteframe',
+    path: '/components/whiteframe',
+    name: 'components:whiteframe',
     component: Whiteframe
+  }
+];
+
+const theme = [
+  {
+    path: '/themes',
+    name: 'themes',
+    redirect: '/themes/configuration'
   },
+  {
+    path: '/themes/configuration',
+    name: 'themes:configuration',
+    component: Configuration
+  },
+  {
+    path: '/themes/dynamic-themes',
+    name: 'themes:dynamic-themes',
+    component: DynamicThemes
+  }
+];
+
+const uiElements = [
+  {
+    path: '/ui-elements',
+    name: 'ui-elements',
+    redirect: '/ui-elements/typography'
+  },
+  {
+    path: '/ui-elements/typography',
+    name: 'ui-elements:typography',
+    component: Typography
+  },
+  {
+    path: '/ui-elements/grid-system',
+    name: 'ui-elements:grid-system',
+    component: GridSystem
+  }
+];
+
+const error = [
   {
     path: '*',
     name: 'error',
@@ -128,4 +192,4 @@ const routes = [
   }
 ];
 
-export default routes;
+export default [].concat(main, components, theme, uiElements, error);