Update NavBar

2 files changed, 16 insertions, 25 deletions

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 327a093..ac114f9 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,12 +1,12 @@
 <template>
   <nav :class="navbarClass">
     <div class="title">
-      <img v-if="logo" class="logo" :src="logo" />
+      <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
       <router-link :class="titleClass" to="/">{{ title }}</router-link>
     </div>
     <div class="space"></div>
     <button @click="toggleMenu" class="menu-toggler">Menu</button>
-    <div :class="linksClass" @click="toggleMenu">
+    <ul :class="linksClass" @click="toggleMenu">
       <!-- Loop for generating links -->
       <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name"></NavLink>
       <NavLink
@@ -16,7 +16,7 @@
         :name="route.name"
         :external="true"
       ></NavLink>
-    </div>
+    </ul>
   </nav>
 </template>
 
@@ -156,12 +156,14 @@ export default {
   }
 
   .links.show {
-    display: block !important;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
     width: 100%;
     left: 0;
     top: 0;
-    padding-bottom: 20px;
 
     background: #fff;
   }
@@ -176,10 +178,6 @@ export default {
   .navbar {
     margin-bottom: 40px;
   }
-
-  .links {
-    margin-top: 120px;
-  }
 }
 
 @media (max-width: 500px) {
@@ -191,14 +189,16 @@ export default {
     width: 85px;
   }
 
-  .title-name,
+  .title-name {
+    font-size: 20px;
+  }
+
   .title-name.margin {
     margin-left: 80px;
-    font-size: 20px;
   }
 
   .links.show {
-    height: 100%;
+    height: calc(100% - 80px);
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
index 7a9e8f8..8915585 100644
--- a/src/components/NavLink.vue
+++ b/src/components/NavLink.vue
@@ -1,7 +1,7 @@
 <template>
   <li class="navlink">
-    <a v-if="external" :class="linkClass" target="_blank" :href="link">{{ name }}</a>
-    <router-link v-else :class="linkClass" :to="link">{{ name }}</router-link>
+    <a v-if="external" class="link" target="_blank" rel="”noopener”" :href="link">{{ name }}</a>
+    <router-link v-else class="link" :to="link">{{ name }}</router-link>
   </li>
 </template>
 
@@ -10,16 +10,7 @@ export default {
   props: {
     link: String,
     name: String,
-    external: { type: Boolean, default: false },
-    active: { type: Boolean, default: false }
-  },
-  computed: {
-    linkClass() {
-      if (this.active) {
-        return "link active";
-      }
-      return "link";
-    }
+    external: { type: Boolean, default: false }
   }
 };
 </script>
@@ -50,7 +41,7 @@ export default {
   margin: 10px;
 }
 
-.active {
+.router-link-exact-active {
   background-color: #ececec !important;
 }