From b01582f376edb9c2f05782bd082f721211327af5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 23 Aug 2018 07:53:08 +0200
Subject: [PATCH] add subnavigation component

---
 examples/Components/App/index.vue            |  3 ++
 examples/Components/Navigation/index.vue     | 48 ++++----------------
 examples/Components/Navigation/style.scss    | 27 +++--------
 examples/Components/Subnavigation/index.vue  | 30 ++++++++++++
 examples/Components/Subnavigation/style.scss | 33 ++++++++++++++
 5 files changed, 82 insertions(+), 59 deletions(-)
 create mode 100644 examples/Components/Subnavigation/index.vue
 create mode 100644 examples/Components/Subnavigation/style.scss

diff --git a/examples/Components/App/index.vue b/examples/Components/App/index.vue
index e3e03b1a..13f9b3a7 100644
--- a/examples/Components/App/index.vue
+++ b/examples/Components/App/index.vue
@@ -2,6 +2,7 @@
   <div class="page" spellcheck="false">
 
     <navigation />
+    <subnavigation />
 
     <div class="page__content">
       <router-view />
@@ -23,12 +24,14 @@
 
 <script>
 import Navigation from 'Components/Navigation'
+import Subnavigation from 'Components/Subnavigation'
 import Icon from 'Components/Icon'
 import Ad from 'Components/Ad'
 
 export default {
   components: {
     Navigation,
+    Subnavigation,
     Icon,
     Ad,
   },
diff --git a/examples/Components/Navigation/index.vue b/examples/Components/Navigation/index.vue
index db80fed8..39979957 100644
--- a/examples/Components/Navigation/index.vue
+++ b/examples/Components/Navigation/index.vue
@@ -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>
diff --git a/examples/Components/Navigation/style.scss b/examples/Components/Navigation/style.scss
index a1247c90..bbb49e38 100644
--- a/examples/Components/Navigation/style.scss
+++ b/examples/Components/Navigation/style.scss
@@ -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 {
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
new file mode 100644
index 00000000..c8987096
--- /dev/null
+++ b/examples/Components/Subnavigation/index.vue
@@ -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>
\ No newline at end of file
diff --git a/examples/Components/Subnavigation/style.scss b/examples/Components/Subnavigation/style.scss
new file mode 100644
index 00000000..cfe0a960
--- /dev/null
+++ b/examples/Components/Subnavigation/style.scss
@@ -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);
+    }
+	}
+
+}
\ No newline at end of file