diff options
| -rw-r--r-- | .bitmap | 4 | ||||
| -rw-r--r-- | src/components/NavBar.vue | 24 | ||||
| -rw-r--r-- | src/components/NavLink.vue | 17 |
3 files changed, 18 insertions, 27 deletions
diff --git a/.bitmap b/.bitmap index 37f742b..f52c7a2 100644 --- a/.bitmap +++ b/.bitmap @@ -1,7 +1,7 @@ /* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */ { - "pniedzwiedzinski.19pdh/nav-bar@0.1.4": { + "pniedzwiedzinski.19pdh/nav-bar@0.1.5": { "files": [ { "relativePath": "src/components/NavBar.vue", @@ -13,7 +13,7 @@ "origin": "AUTHORED", "exported": true }, - "pniedzwiedzinski.19pdh/nav-link@0.1.1": { + "pniedzwiedzinski.19pdh/nav-link@0.1.5": { "files": [ { "relativePath": "src/components/NavLink.vue", 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; } |