add subnavigation component

This commit is contained in:
Philipp Kühn
2018-08-23 07:53:08 +02:00
parent a080c2be72
commit b01582f376
5 changed files with 82 additions and 59 deletions

View File

@@ -0,0 +1,30 @@
<template>
<div class="subnavigation">
<router-link class="subnavigation__link" to="/">
Menu Bar
</router-link>
<router-link class="subnavigation__link" to="/menu-bubble">
Menu Bubble
</router-link>
<router-link class="subnavigation__link" to="/links">
Links
</router-link>
<router-link class="subnavigation__link" to="/hiding-menu-bar">
Hiding Menu Bar
</router-link>
<router-link class="subnavigation__link" to="/todo-list">
Todo List
</router-link>
<router-link class="subnavigation__link" to="/markdown-shortcuts">
Markdown Shortcuts
</router-link>
<router-link class="subnavigation__link" to="/read-only">
Read-Only
</router-link>
<router-link class="subnavigation__link" to="/embeds">
Embeds
</router-link>
</div>
</template>
<style lang="scss" src="./style.scss" scoped></style>

View File

@@ -0,0 +1,33 @@
@import "~variables";
.subnavigation {
position: sticky;
top: 0;
z-index: 1000;
padding: 0.5rem;
background-color: rgba($color-black, 0.9);
color: $color-white;
text-align: center;
&__link {
display: inline-block;
color: rgba($color-white, 0.5);
text-decoration: none;
font-weight: bold;
font-size: 0.9rem;
padding: 0.1rem 0.5rem;
border-radius: 3px;
&:hover {
color: $color-white;
background-color: rgba($color-white, 0.1);
}
&.is-exact-active {
color: $color-white;
background-color: rgba($color-white, 0.2);
}
}
}