Implemented home button navigation

Also fixed uncaught exceptions when redirecting with `router.push`, see vuejs/vue-router#2932
alex-c · Feb 16, 2020 · 787a0f5 · 787a0f5
1 parent df82dc3
commit 787a0f5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/mts-frontend/public/index.html b/mts-frontend/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="./fonts.css" />
+    <link rel="stylesheet" type="text/css" href="./fonts.css" />
     <title>OpenMTS</title>
   </head>
   <body>

diff --git a/mts-frontend/src/components/Navbar.vue b/mts-frontend/src/components/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <header id="navbar">
-    <div id="navbar-title" :class="{collapsed : menuCollapsed}">
+    <div id="navbar-title" :class="{collapsed : menuCollapsed}" @click="navigateHome">
       <i class="el-icon-s-home" v-if="menuCollapsed" />
       <span id="navbar-title-text" v-else>OpenMTS</span>
     </div>
@@ -55,18 +55,24 @@ export default {
     },
   },
   methods: {
+    navigateHome: function() {
+      this.$router.push({ path: '/' }, () => {});
+    },
     toggleSidebar: function() {
       this.$store.commit('toggleSidebar');
     },
     userMenuAction: function(command) {
       switch (command) {
         case 'account':
-          this.$router.push({ name: command });
+          this.$router.push({ path: '/private/' + command });
           break;
         case 'logout':
           this.$store.commit('logout');
           this.$store.commit('expandSidebar');
-          this.$router.push({ path: '/' });
+          this.$router.push({ path: '/login' }, () => {});
+          break;
+        default:
+          console.error(`Invalid user menu action '${command}' was triggered.`);
           break;
       }
     },
@@ -95,6 +101,9 @@ export default {
   background-color: $color-dark-accent;
   overflow: hidden;
   transition: all 0.5s ease-in-out;
+  &:hover {
+    cursor: pointer;
+  }
   &.collapsed {
     width: 47px;
   }

diff --git a/mts-frontend/src/router/index.js b/mts-frontend/src/router/index.js
@@ -14,7 +14,6 @@ import store from '../store';
 const routes = [
   {
     path: '/',
-    name: 'home',
     beforeEnter: (_to, _from, next) => {
       if (store.state.token === null) {
         next({ path: '/login' });
@@ -25,28 +24,25 @@ const routes = [
   },
   {
     path: '/login',
-    name: 'public',
     component: Public,
   },
   {
     path: '/private',
-    name: 'private',
     component: Private,
     beforeEnter: function(_to, _from, next) {
       if (store.state.token === null) {
-        next({ path: '/' });
+        next({ path: '/login' });
       } else {
         next();
       }
     },
     children: [
       {
-        path: '/',
+        path: '',
         component: Dashboard,
       },
       {
-        path: '/account',
-        name: 'account',
+        path: 'account',
         component: Account,
       },
     ],