diff options
Diffstat (limited to 'src/components/NavBar.vue')
-rw-r--r-- | src/components/NavBar.vue | 24 |
1 files changed, 12 insertions, 12 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 |