Merge pull request #4 from JuampiRombola/improve-design [ok:FdelMazo]

Improve design

Author: JuampiRombola

public/favicon.ico

@@ -1,28 +1,43 @@
 <template>
   <v-app>
-    <v-app-bar app dense flat clipped-left color="primary">
-      <v-app-bar-nav-icon color="white" @click="mini = !mini"></v-app-bar-nav-icon>
+    <v-app-bar app clipped-left color="white" class="elevation-1" height="56">
+      <v-app-bar-nav-icon @click="mini = !mini"></v-app-bar-nav-icon>
+
+      <v-img
+        max-width="28"
+        :src="require('@/assets/frux-logo.svg')"
+        alt="frux logo"
+        class="ml-2 pointer"
+        @click="redirect('Dashboard')"
+      ></v-img>
+
+      <v-img
+        max-width="56"
+        :src="require('@/assets/frux-name.svg')"
+        alt="frux name"
+        class="ml-2 pointer"
+        @click="redirect('Dashboard')"
+      ></v-img>
 
-      <v-toolbar-title>Frux</v-toolbar-title>
     </v-app-bar>
 
     <v-navigation-drawer
-      color="accent"
       app
       v-model="drawer"
       :mini-variant.sync="mini"
       clipped
+      color="#0D44511A"
     >
       <v-list dense>
         <v-list-item
           v-for="item in items"
           :key="item.title"
           link
-          class="my-2"
+          :class="['my-2', isCurrentRoute(item.route) ? 'selected' : '' ]"
           @click="redirect(item.route)"
         >
           <v-list-item-icon>
-            <v-icon color="primary">{{ item.icon }}</v-icon>
+            <v-icon :color="isCurrentRoute(item.route) ? 'primary' : ''">{{ item.icon }}</v-icon>
           </v-list-item-icon>
 
           <v-list-item-content>
@@ -51,9 +66,9 @@ export default {
         { title: 'Dashboard', icon: 'mdi-view-dashboard', route: 'Dashboard' },
         { title: 'Usuarios', icon: 'mdi-account-group', route: 'Users' },
         { title: 'Proyectos', icon: 'mdi-inbox-multiple', route: 'Projects' },
-        { title: 'Transacciones', icon: 'mdi-cash-multiple', route: 'Dashboard' },
-        { title: 'Métricas', icon: 'mdi-chart-pie', route: 'Dashboard' },
-        { title: 'Servidores', icon: 'mdi-server', route: 'Dashboard' }
+        { title: 'Transacciones', icon: 'mdi-cash-multiple', route: 'Transactions' },
+        { title: 'Métricas', icon: 'mdi-chart-pie', route: 'Metrics' },
+        { title: 'Servidores', icon: 'mdi-server', route: 'Servers' }
       ],
       mini: true
     }
@@ -62,7 +77,19 @@ export default {
   methods: {
     redirect (routeName) {
       this.$router.push({ name: routeName })
+    },
+    isCurrentRoute (routeName) {
+      return this.$router.currentRoute.name === routeName
     }
   }
 }
 </script>
+
+<style scoped>
+.selected {
+  background-color: rgba(13, 68, 81, 0.2);
+}
+.pointer {
+  cursor: pointer;
+}
+</style>

src/App.vue

@@ -7,7 +7,7 @@ export default new Vuetify({
   theme: {
     themes: {
       light: {
-        primary: '#7A8435',
+        primary: '#0d4451',
         secondary: '#9B6F4F',
         accent: '#C6CBA3',
         error: '#FF5252',

src/assets/frux-logo.svg

@@ -27,10 +27,26 @@ const routes = [
     path: '/projects',
     name: 'Projects',
     component: () => import('../views/Projects.vue')
+  },
+  {
+    path: '/transactions',
+    name: 'Transactions',
+    component: () => import('../views/Transactions.vue')
+  },
+  {
+    path: '/metrics',
+    name: 'Metrics',
+    component: () => import('../views/Metrics.vue')
+  },
+  {
+    path: '/servers',
+    name: 'Servers',
+    component: () => import('../views/Servers.vue')
   }
 ]
 
 const router = new VueRouter({
+  mode: 'history',
   routes
 })
 

src/assets/frux-name.svg

@@ -0,0 +1,13 @@
+<template>
+  <h1>Métricas</h1>
+</template>
+
+<script>
+export default {
+  name: 'Metrics'
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/logo.png

@@ -1,15 +1,20 @@
 <template>
-  <v-container class="py-8 px-6" fluid>
+  <v-container>
     <v-row>
       <v-col>
-        <v-data-table
-          :headers="headers"
-          :items="projects"
-          :options.sync="options"
-          :server-items-length="totalCount"
-          :loading="loading"
-          class="elevation-1"
-        ></v-data-table>
+        <v-card flat>
+          <v-card-title>Proyectos</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :headers="headers"
+              :items="projects"
+              :options.sync="options"
+              :server-items-length="totalCount"
+              :loading="loading"
+              class="elevation-1"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
       </v-col>
     </v-row>
   </v-container>