feat(demo): Removed dark-theme switch

matsp · Feb 7, 2018 · 9a174c8 · 9a174c8
1 parent 79ba737
commit 9a174c8
Showing 1 changed file with 48 additions and 62 deletions.
diff --git a/demo/App.vue b/demo/App.vue
@@ -1,70 +1,58 @@
 <template>
-  <m-theme
-  :dark="darkTheme">
-    <m-typography class="demo-body">
-
-      <m-toolbar
-        ref="toolbar"
-        fixed
-        waterfall>
-        <m-toolbar-row shrink-center>
-          <m-toolbar-icon
-            slot="start"
-            icon="menu"
-            menu-icon
-            @click="toggleDrawer()"/>
-          Material components for Vue.js
-          <m-form-field
-            align-end
-            slot="end"
-            class="demo-toolbar-row-right">
-            <m-switch @change="toggleDarkTheme()"/>
-            <label>Dark theme</label>
-          </m-form-field>
-        </m-toolbar-row>
-      </m-toolbar>
-
-      <m-persistent-drawer
-      ref="drawer">
-        <span
-        slot="toolbarSpacer"/>
-        <m-list dense>
-          <m-list-item
-            v-for="item in listItems"
-            :key="item.text"
-            @click="openRoute(item.route)">
-            <m-icon
-              slot="graphic"
-              :icon="item.icon"/>
-            {{ item.text }}
-          </m-list-item>
-        </m-list>
-      </m-persistent-drawer>
-
-      <div class="demo-content">
-        <m-toolbar-fixed-adjust>
-          <main>
-            <m-layout-grid>
-              <keep-alive>
-                <router-view />
-              </keep-alive>
-            </m-layout-grid>
-          </main>
-        </m-toolbar-fixed-adjust>
-      </div>
-
-    </m-typography>
-  </m-theme>
+  <m-typography class="demo-body">
+    <m-toolbar
+      ref="toolbar"
+      fixed
+      waterfall>
+      <m-toolbar-row shrink-center>
+        <m-toolbar-icon
+          slot="start"
+          icon="menu"
+          menu-icon
+          @click="toggleDrawer()"/>
+        Material Components Vue - Demonstration
+      </m-toolbar-row>
+    </m-toolbar>
+    <m-temporary-drawer ref="drawer">
+      <!-- <span slot="toolbarSpacer"/> -->
+      <span
+        class="mdc-theme--primary"
+        slot="header">
+        <m-typo-headline>
+          Components
+        </m-typo-headline>
+      </span>
+      <m-list dense>
+        <m-list-item
+          v-for="item in listItems"
+          :key="item.text"
+          @click="openRoute(item.route)">
+          <m-icon
+            slot="graphic"
+            :icon="item.icon"/>
+          {{ item.text }}
+        </m-list-item>
+      </m-list>
+    </m-temporary-drawer>
+    <div class="demo-content">
+      <m-toolbar-fixed-adjust>
+        <main>
+          <m-layout-grid>
+            <keep-alive>
+              <router-view />
+            </keep-alive>
+          </m-layout-grid>
+        </main>
+      </m-toolbar-fixed-adjust>
+    </div>
+  </m-typography>
 </template>
 
 <script>
 export default {
   computed: {
     listItems () {
       return this.$store.state.app.drawerListItems
-    },
-    darkTheme () {
-      return this.$store.state.app.darkTheme
     }
   },
   methods: {
@@ -73,9 +61,7 @@ export default {
     },
     openRoute (route) {
       this.$router.push(route)
-    },
-    toggleDarkTheme () {
-      this.$store.dispatch('toggleDarkTheme')
+      this.toggleDrawer()
     }
   }
 }