Layout: Added scroll fade to the sidebars

[bookstack] / resources / js / components / tri-layout.js

diff --git a/resources/js/components/tri-layout.js b/resources/js/components/tri-layout.js
index 6510a690e8aa39c761454a898ada8531a64dadfa..85533da5eeddf89838dc0001678046322a1237d4 100644 (file)
--- a/resources/js/components/tri-layout.js
+++ b/resources/js/components/tri-layout.js
@@ -5,6 +5,7 @@ export class TriLayout extends Component {
     setup() {
         this.container = this.$refs.container;
         this.tabs = this.$manyRefs.tab;
+        this.sidebarScrollContainers = this.$manyRefs.sidebarScrollContainer;
 
         this.lastLayoutType = 'none';
         this.onDestroy = null;
@@ -19,15 +20,17 @@ export class TriLayout extends Component {
 
         // Watch layout changes
         this.updateLayout();
-        window.addEventListener('resize', event => {
+        window.addEventListener('resize', () => {
             this.updateLayout();
         }, {passive: true});
+
+        this.setupSidebarScrollHandlers();
     }
 
     updateLayout() {
         let newLayout = 'tablet';
         if (window.innerWidth <= 1000) newLayout = 'mobile';
-        if (window.innerWidth >= 1400) newLayout = 'desktop';
+        if (window.innerWidth > 1400) newLayout = 'desktop';
         if (newLayout === this.lastLayoutType) return;
 
         if (this.onDestroy) {
@@ -108,4 +111,28 @@ export class TriLayout extends Component {
         this.lastTabShown = tabName;
     }
 
+    setupSidebarScrollHandlers() {
+        for (const sidebar of this.sidebarScrollContainers) {
+            sidebar.addEventListener('scroll', () => this.handleSidebarScroll(sidebar), {
+                passive: true,
+            });
+            this.handleSidebarScroll(sidebar);
+        }
+
+        window.addEventListener('resize', () => {
+            for (const sidebar of this.sidebarScrollContainers) {
+                this.handleSidebarScroll(sidebar);
+            }
+        });
+    }
+
+    handleSidebarScroll(sidebar) {
+        const scrollable = sidebar.clientHeight !== sidebar.scrollHeight;
+        const atTop = sidebar.scrollTop === 0;
+        const atBottom = (sidebar.scrollTop + sidebar.clientHeight) === sidebar.scrollHeight;
+
+        sidebar.parentElement.classList.toggle('scroll-away-from-top', !atTop && scrollable);
+        sidebar.parentElement.classList.toggle('scroll-away-from-bottom', !atBottom && scrollable);
+    }
+
 }