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

@@ -1,45 +1,17 @@
<template>
<div class="navigation">
<div class="navigation__header">
<h1 class="navigation__logo">
tiptap <span class="navigation__beta">beta</span>
</h1>
<div>
<a class="navigation__link" href="https://github.com/heyscrumpy/tiptap/blob/master/CONTRIBUTING.md" target="_blank">
Contribute
</a>
<a class="navigation__github-link" href="https://github.com/heyscrumpy/tiptap" target="_blank">
<icon class="navigation__icon" name="github" />
</a>
</div>
</div>
<h1 class="navigation__logo">
tiptap <span class="navigation__beta">beta</span>
</h1>
<div class="navigation__links">
<router-link class="navigation__link" to="/">
Menu Bar
</router-link>
<router-link class="navigation__link" to="/menu-bubble">
Menu Bubble
</router-link>
<router-link class="navigation__link" to="/links">
Links
</router-link>
<router-link class="navigation__link" to="/hiding-menu-bar">
Hiding Menu Bar
</router-link>
<router-link class="navigation__link" to="/todo-list">
Todo List
</router-link>
<router-link class="navigation__link" to="/markdown-shortcuts">
Markdown Shortcuts
</router-link>
<router-link class="navigation__link" to="/read-only">
Read-Only
</router-link>
<router-link class="navigation__link" to="/embeds">
Embeds
</router-link>
<div>
<a class="navigation__link" href="https://github.com/heyscrumpy/tiptap/blob/master/CONTRIBUTING.md" target="_blank">
Contribute
</a>
<a class="navigation__github-link" href="https://github.com/heyscrumpy/tiptap" target="_blank">
<icon class="navigation__icon" name="github" />
</a>
</div>
</div>

View File

@@ -2,16 +2,12 @@
.navigation {
text-align: center;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background-color: $color-black;
color: $color-white;
}
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background-color: $color-black;
color: $color-white;
&__logo {
font-size: 1.1rem;
@@ -37,12 +33,6 @@
border-radius: 5px;
}
&__links {
padding: 0.5rem;
background-color: rgba($color-black, 0.9);
color: $color-white;
}
&__link {
display: inline-block;
color: rgba($color-white, 0.5);
@@ -56,11 +46,6 @@
color: $color-white;
background-color: rgba($color-white, 0.1);
}
&.is-exact-active {
color: $color-white;
background-color: rgba($color-white, 0.2);
}
}
&__github-link {