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 @@
+ Try to focus the editor to see the menu. It's like magic. 🔮
+
+ Hiding Menu Bar
+
+