From 2981b22011411f805fc8ba104446138e5234abd6 Mon Sep 17 00:00:00 2001
From: mirkobrombin <send@mirko.pm>
Date: Sun, 28 Jan 2024 09:58:39 +0100
Subject: [PATCH] feat[close #32]: hide topbar when reading/scrolling through
 articles

---
 src/App.vue              | 5 ++++-
 src/assets/css/style.css | 9 ++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 167dc57..7013a79 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="topbar">
+  <div class="topbar" :class="{ 'is-sticky': stickyTopbar }">
     <div class="container">
       <nav class="navbar" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
@@ -106,6 +106,9 @@ export default defineComponent({
     chronosStore() {
       return useChronosStore();
     },
+    stickyTopbar() {
+      return this.$route.name !== "article";
+    },
   },
   watch: {
     $route(to, from) {
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 3daca0b..9c8e528 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -167,11 +167,14 @@ p span.badge {
 .topbar {
     background-color: #fff;
     border-bottom: 1px solid #dddddd;
-    position: sticky;
     top: 0;
     z-index: 9;
 }
 
+.topbar.is-sticky {
+    position: sticky;
+}
+
 .navbar-end {
     gap: 10px;
 }
@@ -362,6 +365,10 @@ p span.badge {
     z-index: 1;
 }
 
+.topbar:not(.is-sticky)~.breadcrumb.is-main {
+    top: 0;
+}
+
 .breadcrumb.is-main~.paned .sidebar aside {
     top: 130px;
     height: calc(100vh - 130px);