ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add top navigation

This commit is contained in:
Ramon Wenger 2018-08-20 14:45:47 +02:00
parent bc29989908
commit c7bc57d38d
2 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/App.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="container skillbox"> <div class="container skillbox">
<header class="header skillbox__header"> <header class="header skillbox__header">
<router-link to="/" class="header__logo">skillBOX</router-link> <top-navigation></top-navigation>
<router-link to="/" class="skillbox__header-logo">skillBOX</router-link>
<div>Hans Muster</div>
</header> </header>
<router-view></router-view> <router-view></router-view>
<footer skillbox__footer>Footer</footer> <footer skillbox__footer>Footer</footer>
@ -9,9 +11,15 @@
</template> </template>
<script> <script>
import TopNavigation from "@/components/TopNavigation.vue";
export default { export default {
name: 'App', name: 'App',
components: {
TopNavigation
},
data() { data() {
return {} return {}
}, },
@ -25,13 +33,6 @@
@import "styles/main.scss"; @import "styles/main.scss";
.skillbox { .skillbox {
&__header {
display: grid;
}
}
//todo: move
.container {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
//max-width: 1440px; //max-width: 1440px;
@ -41,21 +42,25 @@
min-height: 100vh; min-height: 100vh;
grid-template-areas: "h" "c" "f"; grid-template-areas: "h" "c" "f";
.header { &__header {
grid-area: h; grid-area: h;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12); box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
display: flex; display: grid;
align-items: center; align-items: center;
justify-content: center; justify-content: space-around;
grid-template-columns: auto 1fr auto;
&__logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
}
} }
footer {
&__header-logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
display: flex;
justify-self: center;
}
&__footer {
grid-area: f; grid-area: f;
display: none; display: none;
} }

27
client/src/components/TopNavigation.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="top-navigation">
<router-link to="/" class="top-navigation__link top-navigation__link--active">Inhalte</router-link>
<router-link to="/" class="top-navigation__link">Räume</router-link>
<router-link to="/" class="top-navigation__link">Portfolio</router-link>
</div>
</template>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.top-navigation {
display: flex;
&__link {
font-size: 1.0625rem;
padding: 0 24px;
font-family: $sans-serif-font-family;
font-weight: 400;
color: $color-grey;
&--active {
color: $color-brand;
}
}
}
</style>