Small CSS tweaks

src/components/layout/AppShell.vue

@@ -10,7 +10,9 @@
         <md-icon>more_vert</md-icon>
       </md-button>
     </md-toolbar>
-    <router-view></router-view>
+    <section class="page-content">
+      <router-view></router-view>
+    </section>
   </main>
 </template>
 
@@ -41,12 +43,6 @@ export default {
   #app {
     padding-left: 280px;
   }
-  .hamburger {
-    display: none;
-  }
-  .md-toolbar > .md-title {
-    padding-left: 25px;
-  }
   .page-content {
     padding: 18px 48px;
   }

src/components/layout/Sidebar.vue

@@ -1,9 +1,7 @@
 <template>
   <md-sidenav class="md-left" ref="sidebar">
     <md-toolbar md-theme="white">
-      <md-button class="md-icon-button" @click.native="toggleSidebar">
-        <img src="../../assets/logo.svg" alt="">
-      </md-button>
+      <img src="../../assets/logo.svg" alt="">
       <h2>SYMPA</h2>
     </md-toolbar>
     <md-divider></md-divider>
@@ -12,8 +10,8 @@
         <img src="//placehold.it/40x40" alt="avatar">
       </md-avatar>
       <div class="md-list-text-container">
-        <span>John Doe</span>
-        <span>[email protected]</span>
+        <b>{{ fullname }}</b>
+        <span>{{ email }}</span>
       </div>
       <md-button class="md-icon-button md-list-action">
         <md-icon>keyboard_arrow_down</md-icon>
@@ -67,23 +65,50 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'sidebar',
   methods: {
     toggle() {
       this.$refs.sidebar.toggle();
     },
   },
+  computed: mapGetters('auth', ['fullname', 'email']),
 };
 </script>
 
 <style>
-.md-sidenav-content {
+.md-list-item .md-list-item-container {
+  font-weight: 500;
+  color: #4F4F4F;
+  font-size: 15px;
+  line-height: 48px;
+}
+
+.md-divider {
+  margin: 8px 0;
+}
+
+.md-sidenav .md-sidenav-content {
   list-style-type: none;
+  width: 280px;
 }
+
+.md-sidenav-content .md-toolbar img {
+  height: 32px;
+  width: 32px;
+  margin: 16px;
+}
+
+.md-sidenav-content .md-toolbar + .md-divider {
+  margin-top: 0;
+}
+
 .md-sidenav-content .md-toolbar h2 {
   font-weight: 100;
 }
+
 @media screen and (min-width: 1281px) {
   .md-sidenav-content {
     transform: translate3d(0,0,0) !important;

src/store/auth/getters.js

@@ -3,3 +3,4 @@ export const errorMessage = state => state.error && state.error.message;
 export const pending = state => state.pending;
 export const logged = state => state.user !== null;
 export const fullname = state => (state.user ? `${state.user.name.first} ${state.user.name.last}` : '');
+export const email = state => state.user && state.user.email;