feat[close #32]: hide topbar when reading/scrolling through articles

Vanilla-OS · Jan 28, 2024 · 2981b22 · 2981b22
1 parent f9d8fd8
commit 2981b22
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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);