Added 'Editor' router-link, disabled when on the 'Projects' page.

src/App.vue

@@ -15,7 +15,13 @@
               <router-link to="/login" class="nav-link" aria-current="page">Login</router-link>
             </li>
             <li v-show="isAuthenticated" class="nav-item">
-              <router-link to="/" class="nav-link" aria-current="page">Projects</router-link>
+              <router-link to="/" class="nav-link" aria-current="page" exact>Projects</router-link>
+            </li>
+            <li v-if="project" v-show="isAuthenticated" class="nav-item">
+              <router-link :to="{'name': 'Editor', 'id': project.id}" class="nav-link" aria-current="page">Editor</router-link>
+            </li>
+            <li v-if="!project" v-show="isAuthenticated" class="nav-item">
+              <router-link to="/projects/none" class="nav-link" aria-current="page" :class="{ disabled: !project }">Editor</router-link>
             </li>
             <li v-show="isAuthenticated" class="nav-item">
               <router-link to="/about" class="nav-link" aria-current="page">About</router-link>
@@ -61,7 +67,7 @@ export default {
   },
   computed: {
     ...mapGetters(['isAuthenticated']),
-    ...mapState(['errors'])
+    ...mapState(['errors', 'project'])
   },
   async created() {
     // auto-login on subsequent visits
@@ -87,4 +93,8 @@ export default {
 .error-message {
   text-transform: capitalize;
 }
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
 </style>