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