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

Clean code

Browse Source
This commit is contained in:
Kamil Niemczycki 2021-08-25 01:22:39 +02:00
parent 46eef08eb4
commit 5e5a7538ec
1 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Navigation.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="container" :class="{'container-menu-active': clicked}"> <div class="container" :class="{'container-menu-active': clicked}">
<router-link to="/"> <router-link to="/">
<div class="logo">Kamil<span class="logo-element">Craft</span></div> <div class="logo" @click="linkClicked">Kamil<span class="logo-element">Craft</span></div>
</router-link> </router-link>
<nav class="nav"> <nav class="nav">
<button class="nav-btn" @click="clickMenu"> <button class="nav-btn" @click="clickMenu">
@ -10,18 +10,9 @@
<font-awesome-icon v-else icon="times"></font-awesome-icon> <font-awesome-icon v-else icon="times"></font-awesome-icon>
</transition> </transition>
</button> </button>
<ul class="site-menu"> <ul class="site-menu" :class="{'menu-clicked': clicked}">
<li class="menu-element" @click="linkClicked"> <li v-for="menuItem in menuItems" :key="menuItem.slug" class="menu-element" @click="linkClicked">
<router-link to="/">Start</router-link> <router-link :to="menuItem.uri">{{ menuItem.title }}</router-link>
</li>
<li class="menu-element" @click="linkClicked">
<router-link to="/projects">Projekty</router-link>
</li>
<li class="menu-element" @click="linkClicked">
<router-link to="/about">O mnie</router-link>
</li>
<li class="menu-element" @click="linkClicked">
<router-link to="/contact">Kontakt</router-link>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -111,7 +102,7 @@
top: 80px; top: 80px;
left: 0; left: 0;
background-color: white; background-color: white;
box-shadow: 0px 10px 10px rgba(0, 0, 0, .1); box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
.menu-element { .menu-element {
width: 100%; width: 100%;
@ -138,6 +129,28 @@ export default {
name: 'SiteHeader', name: 'SiteHeader',
data () { data () {
return { return {
menuItems: [
{
slug: 'start',
title: 'Start',
uri: '/'
},
{
slug: 'projects',
title: 'Projekty',
uri: '/projects'
},
{
slug: 'about',
title: 'O mnie',
uri: '/about'
},
{
slug: 'contact',
title: 'Kontakt',
uri: '/contact'
}
],
clicked: false, clicked: false,
publicPath: process.env.BASE_URL publicPath: process.env.BASE_URL
} }
@ -146,23 +159,11 @@ export default {
changeClickedStatus () { changeClickedStatus () {
this.clicked = !this.clicked this.clicked = !this.clicked
}, },
addMenuClicked () {
const siteMenu = document.querySelector('.site-menu')
siteMenu.classList.add('menu-clicked')
},
removeMenuClicked () {
const siteMenu = document.querySelector('.site-menu')
siteMenu.classList.remove('menu-clicked')
},
clickMenu () { clickMenu () {
!this.clicked ? this.addMenuClicked() : this.removeMenuClicked()
this.changeClickedStatus() this.changeClickedStatus()
}, },
linkClicked () { linkClicked () {
/* safari has problem with variables */ if (this.clicked) {
var siteMenu = document.querySelector('.site-menu')
if (siteMenu.classList.contains('menu-clicked')) {
this.removeMenuClicked()
this.changeClickedStatus() this.changeClickedStatus()
} }
} }