From e3aaa0630c746b84a168820744c41552ad217b74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 22 Aug 2018 16:05:44 +0200
Subject: [PATCH] add hiding menu bar example

---
 examples/Components/App/style.scss            |  9 ++-
 examples/Components/Navigation/index.vue      |  3 +
 .../Components/Routes/HidingMenuBar/index.vue | 63 +++++++++++++++++++
 examples/Components/Routes/MenuBar/index.vue  |  2 +-
 examples/main.js                              |  5 ++
 5 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 examples/Components/Routes/HidingMenuBar/index.vue

diff --git a/examples/Components/App/style.scss b/examples/Components/App/style.scss
index 6b83a4d5..4af3763e 100644
--- a/examples/Components/App/style.scss
+++ b/examples/Components/App/style.scss
@@ -3,7 +3,7 @@
 .page {
 
 	&__content {
-		padding: 2rem;
+		padding: 4rem 1rem;
 	}
 
 }
@@ -90,10 +90,13 @@
 
   display: flex;
   margin-bottom: 1rem;
-  visibility: hidden;
-  opacity: 0;
   transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
 
+  &.is-hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
   &.is-focused {
     visibility: visible;
     opacity: 1;
diff --git a/examples/Components/Navigation/index.vue b/examples/Components/Navigation/index.vue
index c3565744..bcb32b6e 100644
--- a/examples/Components/Navigation/index.vue
+++ b/examples/Components/Navigation/index.vue
@@ -20,6 +20,9 @@
 			<router-link class="navigation__link" to="/links">
 				Links
 			</router-link>
+			<router-link class="navigation__link" to="/hiding-menu-bar">
+				Hiding Menu Bar
+			</router-link>
 		</div>
 
 	</div>
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
new file mode 100644
index 00000000..fab5d872
--- /dev/null
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -0,0 +1,63 @@
+<template>
+	<div>
+		<editor :editable="true" class="editor" @update="onUpdate">
+
+			<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
+				<div v-if="nodes && marks">
+
+          <button
+            class="menubar__button"
+            :class="{ 'is-active': marks.bold.active() }"
+            @click="marks.bold.command"
+          >
+            <icon name="bold" />
+          </button>
+
+          <button
+            class="menubar__button"
+            :class="{ 'is-active': marks.italic.active() }"
+            @click="marks.italic.command"
+          >
+            <icon name="italic" />
+          </button>
+
+          <button
+            class="menubar__button"
+            @click="marks.code.command"
+            :class="{ 'is-active': marks.code.active() }
+          ">
+            <icon name="code" />
+          </button>
+
+				</div>
+			</div>
+
+			<div class="editor__content" slot="content" slot-scope="props">
+        <h1>
+          Hiding Menu Bar
+        </h1>
+        <p>
+          Try to focus the editor to see the menu. It's like magic. 🔮
+        </p>
+      </div>
+
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+
+export default {
+  components: {
+    Editor,
+    Icon,
+  },
+  methods: {
+    onUpdate(state) {
+      this.data = state.doc.toJSON()
+    },
+  },
+}
+</script>
\ No newline at end of file
diff --git a/examples/Components/Routes/MenuBar/index.vue b/examples/Components/Routes/MenuBar/index.vue
index 4fa6c5d4..0acbedc4 100644
--- a/examples/Components/Routes/MenuBar/index.vue
+++ b/examples/Components/Routes/MenuBar/index.vue
@@ -2,7 +2,7 @@
 	<div>
 		<editor :editable="true" class="editor" @update="onUpdate">
 
-			<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
+			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
 				<div v-if="nodes && marks">
 
           <button
diff --git a/examples/main.js b/examples/main.js
index 87fafc93..8dc10a4f 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -6,6 +6,7 @@ import App from 'Components/App'
 import RouteMenuBar from 'Components/Routes/MenuBar'
 import RouteMenuBubble from 'Components/Routes/MenuBubble'
 import RouteLinks from 'Components/Routes/Links'
+import RouteHidingMenuBar from 'Components/Routes/HidingMenuBar'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
 svgSpriteLoader(__svg__.filename)
@@ -27,6 +28,10 @@ const routes = [
     path: '/links',
     component: RouteLinks,
   },
+  {
+    path: '/hiding-menu-bar',
+    component: RouteHidingMenuBar,
+  },
 ]
 
 const router = new VueRouter({