kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Update navigation

Browse Source
This commit is contained in:
Kamil Niemczycki 2021-04-23 14:14:19 +02:00
parent 8ec2346cd4
commit b343601126
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Navigation.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div id="nav"> <div id="nav">
<img alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`"> <img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
<ul> <ul id="menu">
<li><router-link to="/">Strona główna</router-link></li> <li class="menu-element"><router-link to="/">Strona główna</router-link></li>
<li><router-link to="/projects">Projekty</router-link></li> <li class="menu-element"><router-link to="/projects">Projekty</router-link></li>
<li><router-link to="/about">O mnie</router-link></li> <li class="menu-element"><router-link to="/about">O mnie</router-link></li>
</ul> </ul>
</div> </div>
</template> </template>
@ -14,17 +14,28 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 5px 30px;
ul { #nav-logo {
object-fit: cover;
height: 50px;
}
#menu {
display: flex; display: flex;
list-style: none; list-style: none;
li { .menu-element {
display: block; display: block;
padding: 0 10px;
&:hover {
background: rgba(0, 0 , 0, .1);
}
} }
} }
a { a {
font-weight: bold; font-weight: bold;
color: #2c3e50; color: #2c3e50;
line-height: 50px;
&.router-link-exact-active { &.router-link-exact-active {
color: #42b983; color: #42b983;