feat(app): complete initial structure

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "vue": "^2.5.17",
     "vue-meta": "^1.5.2",
-    "vuetify": "^1.1.4"
+    "vuetify": "^1.2.0-beta.0"
   },
   "devDependencies": {
     "@mdi/font": "^2.5.94",
@@ -23,11 +23,10 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "vue-analytics": "^5.8.0",
-    "vue-cli-plugin-vuetify-alpha": "../vue-cli-plugin-vuetify-alpha/",
     "vue-i18n": "^7.4.0",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.17",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"
   }
-}
+}

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet" type="text/css">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>material-free</title>
   </head>

src/App.vue

@@ -5,7 +5,5 @@
     <core-drawer />
 
     <core-view />
-
-    <core-footer />
   </v-app>
 </template>

src/components/core/Drawer.vue

@@ -1,49 +1,122 @@
 <template>
   <v-navigation-drawer
-    fixed
-    temporary
+    id="app-drawer"
     v-model="inputValue"
-    right
+    app
+    class="elevation-12"
+    dark
+    floating
+    persistent
   >
-    <v-list>
-      <v-list-tile>
-        <v-spacer />
-        <v-btn icon @click="toggleDrawer">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-list-tile>
-      <v-list-tile
-        v-for="(item, i) in items"
-        :key="i"
-        :to="item.to"
+    <v-img
+      height="100%"
+      src="https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg"
+    >
+      <v-list
+        class="pa-3 fill-height"
+        style="background: rgba(0, 0, 0, 0.7;"
       >
-        <v-list-tile-title v-text="item.text" />
-      </v-list-tile>
-    </v-list>
+        <v-list-tile avatar>
+          <v-list-tile-avatar
+            color="white">
+            <v-img
+              src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Vue.js_Logo.svg/400px-Vue.js_Logo.svg.png"
+              height="32"
+              contain
+              class="mt-1"
+            />
+          </v-list-tile-avatar>
+          <v-list-tile-title class="title font-weight-light">VUE MD</v-list-tile-title>
+        </v-list-tile>
+        <v-divider
+          class="mt-2 mb-4"/>
+        <v-list-tile
+          v-for="(link, i) in links"
+          :key="i"
+          :to="link.to"
+          active-class="primary"
+          avatar
+          class="mb-2"
+        >
+          <v-list-tile-action>
+            <v-icon>{{ link.icon }}</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title
+            class="font-weight-thin"
+            v-text="link.text"
+          />
+        </v-list-tile>
+      </v-list>
+    </v-img>
   </v-navigation-drawer>
 </template>
 
 <script>
-  // Utilities
-  import { mapMutations } from 'vuex'
+// Utilities
+import { mapMutations } from 'vuex'
 
-  export default {
-    computed: {
-      inputValue: {
-        get () {
-          return this.$store.state.app.drawer
-        },
-        set (val) {
-          this.setDrawer(val)
-        }
+export default {
+  data: () => ({
+    links: [
+      {
+        to: '/',
+        icon: 'mdi-view-dashboard',
+        text: 'Dashboard'
       },
-      items () {
-        return this.$t('Layout.View.items')
+      {
+        to: '/user-profile',
+        icon: 'mdi-account',
+        text: 'User Profile'
+      },
+      {
+        to: '/table-list',
+        icon: 'mdi-clipboard-outline',
+        text: 'Table List'
+      },
+      {
+        to: '/typography',
+        icon: 'mdi-format-font',
+        text: 'Typography'
+      },
+      {
+        to: '/icons',
+        icon: 'mdi-chart-bubble',
+        text: 'Icons'
+      },
+      {
+        to: '/maps',
+        icon: 'mdi-map-marker',
+        text: 'Maps'
+      },
+      {
+        to: '/notifications',
+        icon: 'mdi-bell',
+        text: 'Notifications'
+      }
+    ]
+  }),
+  computed: {
+    inputValue: {
+      get () {
+        return this.$store.state.app.drawer
+      },
+      set (val) {
+        this.setDrawer(val)
       }
     },
-
-    methods: {
-      ...mapMutations('app', ['setDrawer', 'toggleDrawer'])
+    items () {
+      return this.$t('Layout.View.items')
     }
+  },
+
+  methods: {
+    ...mapMutations('app', ['setDrawer', 'toggleDrawer'])
   }
+}
 </script>
+
+<style>
+  #app-drawer .v-list__tile {
+    border-radius: 4px;
+  }
+</style>

src/components/core/Footer.vue

@@ -1,7 +1,52 @@
 <template>
-  <v-footer app inset>
-    <v-spacer />
-      &copy; <span v-text="$t('Core.Footer.footer')" />
-    <v-spacer />
+  <v-footer
+    id="core-footer"
+    absolute
+    class="px-5"
+    height="96"
+  >
+    <a
+      v-for="link in links"
+      :key="link"
+      href="#"
+      class="tertiary--text mr-5"
+      v-text="link"
+    />
+    <v-spacer/>
+    <span class="subheading font-weight-thin">
+      &copy;
+      {{ (new Date()).getFullYear() }}
+      Creative Tim, made with
+      <v-icon
+        color="tertiary"
+        size="22">mdi-heart</v-icon>
+      for a better web
+    </span>
   </v-footer>
 </template>
+
+<script>
+export default {
+  data: () => ({
+    links: [
+      'Home',
+      'Company',
+      'Portfolio',
+      'Blog'
+    ]
+  })
+}
+</script>
+
+<style>
+#core-footer {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  z-index: 0;
+}
+
+#core-footer a {
+  font-weight: 500;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+</style>

src/components/core/Toolbar.vue

@@ -1,15 +1,109 @@
 <template>
-  <v-toolbar app>
-    <v-toolbar-title v-text="$t('Core.Toolbar.title')"/>
+  <v-toolbar
+    id="core-toolbar"
+    app
+    color="transparent"
+    flat
+    prominent
+  >
+    <v-toolbar-title
+      class="tertiary--text font-weight-light"
+      v-text="title"
+    />
     <v-spacer />
     <v-toolbar-items>
-      <v-btn
-        flat
-        href="https://community.vuetifyjs.com"
-        target="_blank"
+      <v-flex
+        align-center
+        layout
+        py-2
       >
-        <span v-text="$t('Common.needHelp')" />
-      </v-btn>
+        <v-text-field
+          class="mr-4 mt-2"
+          label="Search..."
+          hide-details
+        />
+        <div
+          v-ripple
+          class="pa-3"
+        >
+          <v-icon color="tertiary">mdi-view-dashboard</v-icon>
+        </div>
+        <v-menu
+          bottom
+          left
+          offset-y
+          transition="slide-y-transition">
+          <router-link
+            v-ripple
+            slot="activator"
+            class="pa-3"
+            to="/notifications"
+          >
+            <v-badge
+              color="error"
+              overlap
+            >
+              <template slot="badge">
+                {{ notifications.length }}
+              </template>
+              <v-icon color="tertiary">mdi-bell</v-icon>
+            </v-badge>
+          </router-link>
+          <v-card>
+            <v-list dense>
+              <v-list-tile
+                v-for="notification in notifications"
+                :key="notification"
+                @click="onClick"
+              >
+                <v-list-tile-title
+                  v-text="notification"
+                />
+              </v-list-tile>
+            </v-list>
+          </v-card>
+        </v-menu>
+        <router-link
+          v-ripple
+          class="pa-3"
+          to="/user-profile"
+        >
+          <v-icon color="tertiary">mdi-account</v-icon>
+        </router-link>
+      </v-flex>
     </v-toolbar-items>
   </v-toolbar>
 </template>
+
+<script>
+export default {
+  data: () => ({
+    notifications: [
+      'Mike, John responded to your email',
+      'You have 5 new tasks',
+      'You\'re now a friend with Andrew',
+      'Another Notification',
+      'Another One'
+    ],
+    title: null
+  }),
+
+  watch: {
+    '$route' (val) {
+      this.title = val.name
+    }
+  },
+
+  methods: {
+    onClick () {
+      //
+    }
+  }
+}
+</script>
+
+<style>
+  #core-toolbar a {
+    text-decoration: none;
+  }
+</style>

src/components/core/View.vue

@@ -1,17 +1,21 @@
 <template>
   <v-content>
-    <v-fade-transition mode="out-in">
-      <router-view />
-    </v-fade-transition>
+    <v-container
+      fluid>
+      <v-fade-transition mode="out-in">
+        <router-view />
+      </v-fade-transition>
+    </v-container>
+    <core-footer />
   </v-content>
 </template>
 
 <script>
-  export default {
-    metaInfo () {
-      return {
-        titleTemplate: '%s — Alpha Theme'
-      }
+export default {
+  metaInfo () {
+    return {
+      titleTemplate: '%s — Material Design'
     }
   }
+}
 </script>