Mobile menu navigation and cosmetics

src/App.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="layout-wrapper">
-        <app-topbar />
-        <app-menu />
+        <app-topbar @menubutton-click="onMenuButtonClick"/>
+        <app-menu :active="sidebarActive" @menuitem-click="onMenuItemClick" />
+        <div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
         <div class="layout-content">
             <router-view/>
             <app-footer />
@@ -15,11 +16,27 @@ import AppMenu from '@/AppMenu.vue';
 import AppFooter from '@/AppFooter.vue';
 
 export default {
+    data() {
+        return {
+            sidebarActive: false
+        }
+    },
+    methods: {
+        onMenuButtonClick() {
+            this.sidebarActive = !this.sidebarActive;
+        },
+        onMenuItemClick(event) {
+            this.sidebarActive = false;
+        },
+        onMaskClick(event) {
+            this.sidebarActive = false;
+        }
+    },
     components: {
         'app-topbar': AppTopBar,
         'app-menu': AppMenu,
         'app-footer': AppFooter
-    }
+    },
 }
 </script>
 

src/AppMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-sidebar">
+    <div :class="['layout-sidebar', {'active': active}]" @click="onClick">
         <div class="layout-menu">
             <a @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
                 <img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
@@ -146,6 +146,9 @@
 
 <script>
 export default {
+    props: {
+        active: false
+    },
     data() {
         return {
             activeMenuIndex: null
@@ -154,6 +157,11 @@ export default {
     methods: {
         toggleMenu(event, index) {
             this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index;
+        },
+        onClick(event) {
+            if (event.target.nodeName === 'A') {
+                this.$emit('menuitem-click');
+            }
         }
     }
 }

src/AppTopBar.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="layout-topbar">
-        <a class="menu-button"><i class="pi pi-bars"></i></a>
+        <a class="menu-button" @click="$emit('menubutton-click')">
+            <i class="pi pi-bars"></i>
+        </a>
         <router-link to="/" class="logo">
             <img alt="logo" src="./assets/images/primevue-logo.png">
         </router-link>

src/assets/styles/app.scss

@@ -62,7 +62,7 @@ body {
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 999;
+    z-index: 997;
     @include shadow(0 0 4px rgba(0,0,0,0.25));
 
     .menu-button {
@@ -72,15 +72,15 @@ body {
         position: absolute;
         left: 0;
         top: 0;
-        width: 60px;
-        height: 60px;
-        line-height: 60px;
+        width: 70px;
+        height: 70px;
+        line-height: 70px;
         text-align: center;
         cursor: pointer;
         @include transition(background-color .2s);
 
         &:hover {
-            background-color: #363c3f;
+            background-color: #eeeeee;
         }
 
         i {
@@ -117,7 +117,7 @@ body {
                 text-align: center;
                 padding-bottom: 8px;
                 border-bottom: 4px solid transparent;
-                @include transition(border-bottom-color .2s);
+                @include transition(background-color .2s);
 
                 &:hover {
                     border-bottom-color: #41b883;
@@ -240,6 +240,7 @@ body {
             color: #484848;
             cursor: pointer;
             user-select: none;
+            transition: background-color .2s;
 
             &:hover {
                 background-color: #eeeeee;
@@ -368,14 +369,19 @@ body {
 }
 
 .layout-mask {
+    opacity: .1;
+}
+
+.layout-mask-active {
     z-index: 998;
     width: 100%;
     height: 100%;
     position: fixed;
-    top: 98px;
+    top: 70px;
     left: 0;
     background-color: #4c5254;
     opacity: .7;
+    @include transition(opacity .5s);
 }
 
 .layout-content {
@@ -958,10 +964,10 @@ body {
 
 
     .layout-sidebar {
-        top: 98px;
+        top: 70px;
         left: -300px;
-        @include transition(left .2s);
         z-index: 999;
+        @include transition(left .2s);
 
         &.active {
             left: 0;