KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Still need to work on the dom, but the styling has been updated to be better for mobile, use variables for constant values and scoped it.

Browse Source
This commit is contained in:
Kevin
2019-06-03 23:21:48 +02:00
parent fcc56bf103
commit a30529e192
1 changed files with 70 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/Navigation.vue
View File

@@ -1,54 +1,50 @@
<template> <template>
<nav class="nav"> <div>
<router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App"> <nav class="nav">
<svg class="nav__logo-image"> <router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App">
<use xlink:href="#svgLogo"></use> <svg class="nav__logo-image">
</svg> <use xlink:href="#svgLogo"></use>
</router-link> </svg>
<div class="nav__hamburger" @click="toggleNav"> </router-link>
<div class="bar"></div> <div class="nav__hamburger" @click="toggleNav">
<div class="bar"></div> <div class="bar"></div>
<div class="bar"></div> <div class="bar"></div>
</div> <div class="bar"></div>
<ul class="nav__list"> </div>
<li class="nav__item" v-for="item in listTypes" v-if="item.isCategory"> <ul class="nav__list">
<router-link class="nav__link" :to="{name: item.name, params: {mode: item.type, category: item.query}}"> <li class="nav__item" v-for="item in listTypes">
<div class="nav__link-wrap"> <router-link class="nav__link" :to="'/list/' + item.route">
<svg class="nav__link-icon"> <div class="nav__link-wrap">
<use :xlink:href="'#icon_' + item.query"></use> <!-- <img :src="item.icon" class="nav__link-icon"> -->
</svg> <svg class="nav__link-icon">
<span class="nav__link-title">{{ item.shortTitle }}</span> <use :xlink:href="'#icon_' + item.route"></use>
</div> </svg>
</router-link> <span class="nav__link-title">{{ item.title }}</span>
</li> </div>
<li class="nav__item nav__item--profile"> </router-link>
<!-- <div class="nav__link nav__link--profile" @click="requestToken" v-if="!userLoggedIn"> </li>
<div class="nav__link-wrap"> <li class="nav__item nav__item--profile">
<svg class="nav__link-icon"> <router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
<use xlink:href="#iconLogin"></use> <div class="nav__link-wrap">
</svg> <svg class="nav__link-icon">
<span class="nav__link-title">Log In</span> <use xlink:href="#iconLogin"></use>
</div> </svg>
</div> --> <span class="nav__link-title">Sign in</span>
<router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn"> </div>
<div class="nav__link-wrap"> </router-link>
<svg class="nav__link-icon"> <router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
<use xlink:href="#iconLogin"></use> <div class="nav__link-wrap">
</svg> <svg class="nav__link-icon">
<span class="nav__link-title">Sign in</span> <use xlink:href="#iconLogin"></use>
</div> </svg>
</router-link> <span class="nav__link-title">Profile</span>
<router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn"> </div>
<div class="nav__link-wrap"> </router-link>
<svg class="nav__link-icon"> </li>
<use xlink:href="#iconLogin"></use> </ul>
</svg> </nav>
<span class="nav__link-title">Profile</span> <div class="spacer"></div>
</div> </div>
</router-link>
</li>
</ul>
</nav>
</template> </template>
<script> <script>
@@ -57,7 +53,7 @@ import storage from '../storage.js'
export default { export default {
data(){ data(){
return { return {
listTypes: storage.listTypes, listTypes: storage.homepageLists,
userLoggedIn: localStorage.getItem('token') ? true : false userLoggedIn: localStorage.getItem('token') ? true : false
} }
}, },
@@ -65,9 +61,6 @@ export default {
setUserStatus(){ setUserStatus(){
this.userLoggedIn = localStorage.getItem('token') ? true : false; this.userLoggedIn = localStorage.getItem('token') ? true : false;
}, },
requestToken(){
eventHub.$emit('requestToken');
},
toggleNav(){ toggleNav(){
document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active'); document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active');
document.querySelector('.nav__list').classList.toggle('nav__list--active'); document.querySelector('.nav__list').classList.toggle('nav__list--active');
@@ -79,34 +72,40 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "./src/scss/variables";
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
.nav{ .spacer {
@include mobile-only {
width: 100%;
height: $header-size-mobile;
}
}
.nav {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 50px; height: 50px;
background: $c-white; background: $c-white;
display: flex;
z-index: 10; z-index: 10;
display: block;
@include tablet-min{ @include tablet-min{
display: block;
width: 95px; width: 95px;
height: 100vh; height: 100vh;
} }
&__logo{ &__logo{
display: block;
width: 55px; width: 55px;
height: 50px; height: $header-size-mobile;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $c-dark; background: $c-dark;
@include tablet-min{ @include tablet-min{
width: 95px; width: 95px;
height: 75px; height: $header-size;
} }
&-image{ &-image{
width: 35px; width: 35px;
@@ -231,8 +230,8 @@ export default {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
width: 75px; width: $header-size;
height: 75px; height: $header-size;
border-bottom: 0; border-bottom: 0;
border-left: 1px solid $c-light; border-left: 1px solid $c-light;
} }
@@ -253,6 +252,12 @@ export default {
transition: color 0.5s ease, background 0.5s ease; transition: color 0.5s ease, background 0.5s ease;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
@include mobile-only{ @include mobile-only{
font-size: 10px; font-size: 10px;
padding: 20px 0; padding: 20px 0;
@@ -270,7 +275,6 @@ export default {
&-icon{ &-icon{
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-bottom: 3px;
fill: rgba($c-dark, 0.7); fill: rgba($c-dark, 0.7);
transition: fill 0.5s ease; transition: fill 0.5s ease;
@include tablet-min{ @include tablet-min{
@@ -278,8 +282,10 @@ export default {
height: 20px; height: 20px;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
&-title{ &-title{
margin-top: 5px;
display: block; display: block;
width: 100%; width: 100%;
} }