From febe04a144126426681335c3512801d02512cadc Mon Sep 17 00:00:00 2001
From: Kaushal Shriwas <kaushalshriwas118@gmail.com>
Date: Tue, 17 Feb 2026 14:42:42 +0530
Subject: [PATCH 1/5] fix: preserve scroll when clicked on a sidebar link

---
 frontend/src/components/NestedDraggable.vue | 33 ++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/NestedDraggable.vue b/frontend/src/components/NestedDraggable.vue
index 35d37d54..21256ac9 100644
--- a/frontend/src/components/NestedDraggable.vue
+++ b/frontend/src/components/NestedDraggable.vue
@@ -120,7 +120,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core';
 import { Dropdown, Badge, Button, toast } from 'frappe-ui';
@@ -187,6 +187,37 @@ function toggleExpanded(name) {
     expandedNodes.value[name] = !expandedNodes.value[name];
 }
 
+function isElementInViewport(element, container) {
+    if (!element || !container) return true;
+    const rect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    
+    return (
+        rect.top >= containerRect.top &&
+        rect.bottom <= containerRect.bottom
+    );
+}
+
+watch(
+    () => [props.selectedPageId, props.selectedDraftKey],
+    async () => {
+        if (props.level !== 0) return;
+        
+        const selectedId = props.selectedPageId || props.selectedDraftKey;
+        if (!selectedId) return;
+        
+        await nextTick();
+        
+        const selectedElement = document.querySelector(`[data-wiki-item="${selectedId}"]`);
+        const scrollContainer = selectedElement?.closest('.overflow-auto');
+        
+        if (selectedElement && scrollContainer && !isElementInViewport(selectedElement, scrollContainer)) {
+            selectedElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    },
+    { flush: 'post' }
+);
+
 function handleRowClick(element) {
     if (element._changeType === 'deleted') {
         return;

From bb125ea7ed5761ffe6f76f4520a02b9945a71e0e Mon Sep 17 00:00:00 2001
From: Kaushal Shriwas <kaushalshriwas118@gmail.com>
Date: Tue, 17 Feb 2026 15:13:07 +0530
Subject: [PATCH 2/5] fix: enable sidebar scroll-to-selected with
 data-wiki-item attribute binding

---
 frontend/src/components/NestedDraggable.vue | 9 ++++-----
 frontend/src/pages/SpaceDetails.vue         | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/NestedDraggable.vue b/frontend/src/components/NestedDraggable.vue
index 21256ac9..ca856e54 100644
--- a/frontend/src/components/NestedDraggable.vue
+++ b/frontend/src/components/NestedDraggable.vue
@@ -18,6 +18,7 @@
                     class="flex items-center justify-between pr-2 py-1.5 hover:bg-surface-gray-2 group border-b border-outline-gray-1"
                     :class="getRowClasses(element)"
                     :style="{ paddingLeft: `${level * 12 + 8}px` }"
+                    :data-wiki-item="element.document_name || element.doc_key"
                     @click="handleRowClick(element)"
                 >
                     <div class="flex items-center gap-1.5 flex-1 min-w-0">
@@ -120,7 +121,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed, nextTick } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core';
 import { Dropdown, Badge, Button, toast } from 'frappe-ui';
@@ -200,16 +201,14 @@ function isElementInViewport(element, container) {
 
 watch(
     () => [props.selectedPageId, props.selectedDraftKey],
-    async () => {
+    () => {
         if (props.level !== 0) return;
         
         const selectedId = props.selectedPageId || props.selectedDraftKey;
         if (!selectedId) return;
         
-        await nextTick();
-        
         const selectedElement = document.querySelector(`[data-wiki-item="${selectedId}"]`);
-        const scrollContainer = selectedElement?.closest('.overflow-auto');
+        const scrollContainer = selectedElement?.closest('[data-wiki-scroll-container]');
         
         if (selectedElement && scrollContainer && !isElementInViewport(selectedElement, scrollContainer)) {
             selectedElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
diff --git a/frontend/src/pages/SpaceDetails.vue b/frontend/src/pages/SpaceDetails.vue
index 1821dc17..4cfe824a 100644
--- a/frontend/src/pages/SpaceDetails.vue
+++ b/frontend/src/pages/SpaceDetails.vue
@@ -37,7 +37,7 @@
                 <p class="text-sm text-ink-gray-5 mt-0.5">{{ space.doc?.route }}</p>
             </div>
 
-            <div v-if="space.doc && mergedTreeData" class="flex-1 overflow-auto p-2">
+            <div v-if="space.doc && mergedTreeData" class="flex-1 overflow-auto p-2" data-wiki-scroll-container>
                 <WikiDocumentList
                     :tree-data="mergedTreeData"
                     :space-id="spaceId"

From d8449a1e46237112c530dfad1e9b3860969f1b3e Mon Sep 17 00:00:00 2001
From: Kaushal Shriwas <kaushalshriwas118@gmail.com>
Date: Wed, 18 Feb 2026 16:40:58 +0530
Subject: [PATCH 3/5] fix: resolve sidebar scroll positioning and navigation
 issue

---
 frontend/src/components/NestedDraggable.vue  |  63 ++++++++--
 wiki/templates/wiki/includes/sidebar.html    | 117 ++++++++++++++++---
 wiki/templates/wiki/macros/sidebar_tree.html |   2 +-
 3 files changed, 151 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/NestedDraggable.vue b/frontend/src/components/NestedDraggable.vue
index ca856e54..c0fe0ae5 100644
--- a/frontend/src/components/NestedDraggable.vue
+++ b/frontend/src/components/NestedDraggable.vue
@@ -121,7 +121,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core';
 import { Dropdown, Badge, Button, toast } from 'frappe-ui';
@@ -192,29 +192,70 @@ function isElementInViewport(element, container) {
     if (!element || !container) return true;
     const rect = element.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
-    
+
     return (
         rect.top >= containerRect.top &&
         rect.bottom <= containerRect.bottom
     );
 }
 
+function findParentGroups(items, targetKey, parents = []) {
+    for (const item of items) {
+        if (item.doc_key === targetKey || item.document_name === targetKey) {
+            return parents;
+        }
+        if (item.is_group && item.children) {
+            const found = findParentGroups(item.children, targetKey, [...parents, item.doc_key]);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+function expandParentsAndScroll(selectedId) {
+    if (!selectedId) return;
+
+    const parentKeys = findParentGroups(localItems.value, selectedId);
+
+    if (parentKeys && parentKeys.length > 0) {
+        parentKeys.forEach(key => {
+            expandedNodes.value[key] = true;
+        });
+    }
+
+    nextTick(() => {
+        nextTick(() => {
+            try {
+                const escapedId = CSS.escape(selectedId);
+                const selectedElement = document.querySelector(`[data-wiki-item="${escapedId}"]`);
+
+                if (!selectedElement) {
+                    return;
+                }
+
+                const scrollContainer = selectedElement.closest('[data-wiki-scroll-container]');
+
+                if (scrollContainer && !isElementInViewport(selectedElement, scrollContainer)) {
+                    selectedElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }
+            } catch (error) {
+                console.error('Error scrolling to selected item:', error);
+            }
+        });
+    });
+}
+
 watch(
     () => [props.selectedPageId, props.selectedDraftKey],
     () => {
         if (props.level !== 0) return;
-        
+
         const selectedId = props.selectedPageId || props.selectedDraftKey;
         if (!selectedId) return;
-        
-        const selectedElement = document.querySelector(`[data-wiki-item="${selectedId}"]`);
-        const scrollContainer = selectedElement?.closest('[data-wiki-scroll-container]');
-        
-        if (selectedElement && scrollContainer && !isElementInViewport(selectedElement, scrollContainer)) {
-            selectedElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }
+
+        expandParentsAndScroll(selectedId);
     },
-    { flush: 'post' }
+    { flush: 'post', immediate: true }
 );
 
 function handleRowClick(element) {
diff --git a/wiki/templates/wiki/includes/sidebar.html b/wiki/templates/wiki/includes/sidebar.html
index 8009f1c1..37086f82 100644
--- a/wiki/templates/wiki/includes/sidebar.html
+++ b/wiki/templates/wiki/includes/sidebar.html
@@ -112,7 +112,6 @@
             async navigateTo(route, pushState = true) {
                 if (route === this.currentRoute) return;
 
-                // Check prefetch cache first
                 if (this.prefetchCache[route]) {
                     this.updateContent(this.prefetchCache[route]);
                     this.currentRoute = route;
@@ -145,7 +144,6 @@
                         throw new Error('Invalid response');
                     }
                 } catch (error) {
-                    // Fallback to full page load
                     window.location.href = '/' + route;
                 } finally {
                     this.loading = false;
@@ -203,8 +201,11 @@
                     hljs.highlightAll();
                 }
 
-                // Scroll to top
                 window.scrollTo(0, 0);
+
+                window.dispatchEvent(new CustomEvent('wiki-route-changed', {
+                    detail: { route: data.route || this.currentRoute }
+                }));
             },
 
             updateNavButtons(prevDoc, nextDoc) {
@@ -269,12 +270,36 @@
             },
             
             init() {
-                // Auto-expand parents of current page
-                this.expandCurrentPageParents();
-                
-                // Debug: log all route elements
-                this.$nextTick(() => {
-                    const allRouteElements = document.querySelectorAll('[data-route]');
+                if ('scrollRestoration' in history) {
+                    history.scrollRestoration = 'manual';
+                }
+
+                const initialScrollNeeded = this.currentRoute;
+                const handleInitialScroll = () => {
+                    if (initialScrollNeeded) {
+                        this.expandCurrentPageParents();
+                    }
+                };
+
+                if (document.readyState === 'complete') {
+                    handleInitialScroll();
+                } else {
+                    window.addEventListener('load', handleInitialScroll, { once: true });
+                }
+
+                window.addEventListener('wiki-route-changed', (event) => {
+                    const newRoute = event.detail?.route;
+                    if (newRoute && newRoute !== this.currentRoute) {
+                        this.currentRoute = newRoute;
+                        this.expandCurrentPageParents();
+                    }
+                });
+
+                this.$watch('$store.navigation.currentRoute', (newRoute) => {
+                    if (newRoute && newRoute !== this.currentRoute) {
+                        this.currentRoute = newRoute;
+                        this.expandCurrentPageParents();
+                    }
                 });
             },
             
@@ -293,34 +318,88 @@
             },
             
             expandCurrentPageParents() {
-                // Find and expand all parent groups of the current page
                 if (!this.currentRoute) return;
-                
-                // Wait for DOM to be fully rendered
+
                 this.$nextTick(() => {
-                    // Find the current page element
-                    const currentPageElement = document.querySelector(`[data-route="${this.currentRoute}"]`);
+                    const sidebarContainer = document.querySelector('.wiki-sidebar');
+                    if (!sidebarContainer) return;
+
+                    const currentPageElement = sidebarContainer.querySelector(`[data-route="${this.currentRoute}"]`);
                     if (!currentPageElement) return;
-                    
-                    // Find all parent group containers and expand them
+
                     let parentElement = currentPageElement.parentElement;
+                    const parentsToExpand = [];
+
                     while (parentElement) {
-                        // Look for parent wiki-children containers
                         if (parentElement.classList.contains('wiki-children')) {
-                            // Find the sibling wiki-item-content that has a data-node-id
                             const parentItem = parentElement.parentElement;
                             if (parentItem) {
                                 const parentContent = parentItem.querySelector('.wiki-item-content[data-node-id]');
                                 if (parentContent) {
                                     const nodeId = parentContent.getAttribute('data-node-id');
                                     if (nodeId) {
-                                        this.expandedStates[nodeId] = true;
+                                        parentsToExpand.push(nodeId);
                                     }
                                 }
                             }
                         }
                         parentElement = parentElement.parentElement;
                     }
+
+                    parentsToExpand.forEach(nodeId => {
+                        this.expandedStates[nodeId] = true;
+                    });
+
+                    this.$nextTick(() => {
+                        this.scrollToSelectedItem();
+                    });
+                });
+            },
+
+            scrollToSelectedItem() {
+                const attemptScroll = (retries = 0) => {
+                    const sidebarContainer = document.querySelector('.wiki-sidebar');
+                    if (!sidebarContainer) return;
+
+                    const currentPageElement = sidebarContainer.querySelector(`[data-route="${this.currentRoute}"]`);
+                    if (!currentPageElement) return;
+
+                    const sidebarNav = sidebarContainer.querySelector('nav');
+                    if (!sidebarNav) return;
+
+                    const computedStyle = window.getComputedStyle(sidebarContainer);
+                    const isHidden = computedStyle.display === 'none';
+                    const isCollapsed = sidebarContainer.offsetWidth === 0;
+
+                    if (isHidden || isCollapsed) return;
+
+                    const containerHeight = sidebarNav.clientHeight;
+                    const containerWidth = sidebarNav.clientWidth;
+
+                    if ((containerHeight === 0 || containerWidth === 0) && retries < 8) {
+                        const delay = Math.min(100 * Math.pow(1.5, retries), 1000);
+                        setTimeout(() => {
+                            requestAnimationFrame(() => attemptScroll(retries + 1));
+                        }, delay);
+                        return;
+                    }
+
+                    if (containerHeight === 0) return;
+
+                    const elementRect = currentPageElement.getBoundingClientRect();
+                    const containerRect = sidebarNav.getBoundingClientRect();
+                    const elementRelativeTop = elementRect.top - containerRect.top + sidebarNav.scrollTop;
+                    const elementHeight = currentPageElement.offsetHeight;
+                    const scrollPosition = elementRelativeTop - (containerHeight / 2) + (elementHeight / 2);
+
+                    sidebarNav.scrollTo({
+                        top: Math.max(0, scrollPosition),
+                        behavior: 'instant'
+                    });
+                };
+
+                this.$nextTick(() => {
+                    attemptScroll();
                 });
             }
         }
diff --git a/wiki/templates/wiki/macros/sidebar_tree.html b/wiki/templates/wiki/macros/sidebar_tree.html
index a34f5aca..570a0f19 100644
--- a/wiki/templates/wiki/macros/sidebar_tree.html
+++ b/wiki/templates/wiki/macros/sidebar_tree.html
@@ -38,7 +38,7 @@
                     {% else %}
                         {# Page/leaf item #}
                         <a href="/{{ node.route }}"
-                           @click.prevent.exact="$store.navigation.navigateTo('{{ node.route }}')"
+                           @click.prevent="$store.navigation.navigateTo('{{ node.route }}')"
                            @mouseenter="$store.navigation.prefetch('{{ node.route }}')"
                            class="wiki-item-content wiki-link group w-full flex items-center h-7 rounded px-2 text-[var(--ink-gray-7)] no-underline transition-all duration-200"
                            :class="$store.navigation.currentRoute === '{{ node.route }}' ? 'bg-[var(--surface-selected)] shadow-sm text-[var(--ink-gray-9)]' : 'hover:bg-[var(--surface-gray-2)]'"

From 03177019215820c82fd64b233602dc5ba8978a03 Mon Sep 17 00:00:00 2001
From: Kaushal Shriwas <kaushalshriwas118@gmail.com>
Date: Wed, 18 Feb 2026 16:54:12 +0530
Subject: [PATCH 4/5] fix: preserve browser state, optimize scroll viewport
 check, and restore ctrl+click new tab behavior

---
 wiki/templates/wiki/document.html            |  4 +-
 wiki/templates/wiki/includes/sidebar.html    | 40 +++++++++++++++++---
 wiki/templates/wiki/macros/sidebar_tree.html |  2 +-
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/wiki/templates/wiki/document.html b/wiki/templates/wiki/document.html
index 8ead2fff..b5eeaab2 100644
--- a/wiki/templates/wiki/document.html
+++ b/wiki/templates/wiki/document.html
@@ -68,7 +68,7 @@ <h1 id="wiki-page-title" class="text-3xl font-semibold text-[var(--ink-gray-9)]"
             <div class="flex flex-col sm:flex-row sm:items-stretch gap-4 {{ 'sm:justify-between' if prev_doc and next_doc else ('sm:justify-start' if prev_doc else 'sm:justify-end') }}">
                 {% if prev_doc %}
                 <a href="/{{ prev_doc.route }}"
-                   @click.prevent="$store.navigation.navigateTo('{{ prev_doc.route }}')"
+                   @click="$store.navigation.navigateTo('{{ prev_doc.route }}', true, $event)"
                    @mouseenter="$store.navigation.prefetch('{{ prev_doc.route }}')"
                    class="group sm:flex-1 flex items-center gap-3 p-3 rounded-lg border border-[var(--outline-gray-1)] hover:border-[var(--outline-gray-2)] hover:bg-[var(--surface-gray-1)] transition-colors duration-200 no-underline sm:max-w-[50%] overflow-hidden">
                     {{ render_icon("chevron-left", "w-5 h-5 text-[var(--ink-gray-4)] group-hover:text-[var(--ink-gray-6)] transition-colors duration-200 shrink-0") }}
@@ -81,7 +81,7 @@ <h1 id="wiki-page-title" class="text-3xl font-semibold text-[var(--ink-gray-9)]"
 
                 {% if next_doc %}
                 <a href="/{{ next_doc.route }}"
-                   @click.prevent="$store.navigation.navigateTo('{{ next_doc.route }}')"
+                   @click="$store.navigation.navigateTo('{{ next_doc.route }}', true, $event)"
                    @mouseenter="$store.navigation.prefetch('{{ next_doc.route }}')"
                    class="group sm:flex-1 flex items-center gap-3 p-3 rounded-lg border border-[var(--outline-gray-1)] hover:border-[var(--outline-gray-2)] hover:bg-[var(--surface-gray-1)] transition-colors duration-200 no-underline sm:max-w-[50%] overflow-hidden {{ 'sm:ml-auto' if not prev_doc else '' }}">
                     <div class="flex flex-col gap-1 items-end min-w-0 ml-auto">
diff --git a/wiki/templates/wiki/includes/sidebar.html b/wiki/templates/wiki/includes/sidebar.html
index 37086f82..f99acb60 100644
--- a/wiki/templates/wiki/includes/sidebar.html
+++ b/wiki/templates/wiki/includes/sidebar.html
@@ -109,7 +109,15 @@
                 }
             },
 
-            async navigateTo(route, pushState = true) {
+            async navigateTo(route, pushState = true, event = null) {
+                if (event && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)) {
+                    return;
+                }
+
+                if (event && event.preventDefault) {
+                    event.preventDefault();
+                }
+
                 if (route === this.currentRoute) return;
 
                 if (this.prefetchCache[route]) {
@@ -221,7 +229,7 @@
                     if (prevDoc) {
                         html += `
                             <a href="/${prevDoc.route}"
-                               @click.prevent="$store.navigation.navigateTo('${prevDoc.route}')"
+                               @click="$store.navigation.navigateTo('${prevDoc.route}', true, $event)"
                                @mouseenter="$store.navigation.prefetch('${prevDoc.route}')"
                                class="group sm:flex-1 flex items-center gap-3 p-3 rounded-lg border border-[var(--outline-gray-1)] hover:border-[var(--outline-gray-2)] hover:bg-[var(--surface-gray-1)] transition-colors duration-200 no-underline sm:max-w-[50%] overflow-hidden">
                                 <svg class="w-5 h-5 text-[var(--ink-gray-4)] group-hover:text-[var(--ink-gray-6)] transition-colors duration-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -238,7 +246,7 @@
                         const mlClass = !prevDoc ? 'sm:ml-auto' : '';
                         html += `
                             <a href="/${nextDoc.route}"
-                               @click.prevent="$store.navigation.navigateTo('${nextDoc.route}')"
+                               @click="$store.navigation.navigateTo('${nextDoc.route}', true, $event)"
                                @mouseenter="$store.navigation.prefetch('${nextDoc.route}')"
                                class="group sm:flex-1 flex items-center gap-3 p-3 rounded-lg border border-[var(--outline-gray-1)] hover:border-[var(--outline-gray-2)] hover:bg-[var(--surface-gray-1)] transition-colors duration-200 no-underline sm:max-w-[50%] overflow-hidden ${mlClass}">
                                 <div class="flex flex-col gap-1 items-end min-w-0 ml-auto">
@@ -264,13 +272,15 @@
             // Store expanded states with persistence
             expandedStates: Alpine.$persist({}),
             currentRoute: '{{ doc.route if doc else "" }}',
-            
+            previousScrollRestoration: null,
+
             get isCollapsed() {
                 return this.$store.sidebar.isCollapsed;
             },
-            
+
             init() {
                 if ('scrollRestoration' in history) {
+                    this.previousScrollRestoration = history.scrollRestoration;
                     history.scrollRestoration = 'manual';
                 }
 
@@ -356,6 +366,16 @@
                 });
             },
 
+            isElementInViewport(element, container) {
+                if (!element || !container) return true;
+                const rect = element.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                return (
+                    rect.top >= containerRect.top &&
+                    rect.bottom <= containerRect.bottom
+                );
+            },
+
             scrollToSelectedItem() {
                 const attemptScroll = (retries = 0) => {
                     const sidebarContainer = document.querySelector('.wiki-sidebar');
@@ -386,6 +406,10 @@
 
                     if (containerHeight === 0) return;
 
+                    if (this.isElementInViewport(currentPageElement, sidebarNav)) {
+                        return;
+                    }
+
                     const elementRect = currentPageElement.getBoundingClientRect();
                     const containerRect = sidebarNav.getBoundingClientRect();
                     const elementRelativeTop = elementRect.top - containerRect.top + sidebarNav.scrollTop;
@@ -401,6 +425,12 @@
                 this.$nextTick(() => {
                     attemptScroll();
                 });
+            },
+
+            destroy() {
+                if ('scrollRestoration' in history && this.previousScrollRestoration !== null) {
+                    history.scrollRestoration = this.previousScrollRestoration;
+                }
             }
         }
     }
diff --git a/wiki/templates/wiki/macros/sidebar_tree.html b/wiki/templates/wiki/macros/sidebar_tree.html
index 570a0f19..9b7df730 100644
--- a/wiki/templates/wiki/macros/sidebar_tree.html
+++ b/wiki/templates/wiki/macros/sidebar_tree.html
@@ -38,7 +38,7 @@
                     {% else %}
                         {# Page/leaf item #}
                         <a href="/{{ node.route }}"
-                           @click.prevent="$store.navigation.navigateTo('{{ node.route }}')"
+                           @click="$store.navigation.navigateTo('{{ node.route }}', true, $event)"
                            @mouseenter="$store.navigation.prefetch('{{ node.route }}')"
                            class="wiki-item-content wiki-link group w-full flex items-center h-7 rounded px-2 text-[var(--ink-gray-7)] no-underline transition-all duration-200"
                            :class="$store.navigation.currentRoute === '{{ node.route }}' ? 'bg-[var(--surface-selected)] shadow-sm text-[var(--ink-gray-9)]' : 'hover:bg-[var(--surface-gray-2)]'"

From 676c13bb98edab689bb392e3a272fd9a2e700838 Mon Sep 17 00:00:00 2001
From: Kaushal Shriwas <kaushalshriwas118@gmail.com>
Date: Wed, 18 Feb 2026 17:04:03 +0530
Subject: [PATCH 5/5] fix: clear scroll timers on component destroy

---
 wiki/templates/wiki/includes/sidebar.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/wiki/templates/wiki/includes/sidebar.html b/wiki/templates/wiki/includes/sidebar.html
index f99acb60..f430f2bb 100644
--- a/wiki/templates/wiki/includes/sidebar.html
+++ b/wiki/templates/wiki/includes/sidebar.html
@@ -273,6 +273,8 @@
             expandedStates: Alpine.$persist({}),
             currentRoute: '{{ doc.route if doc else "" }}',
             previousScrollRestoration: null,
+            scrollTimeoutHandle: null,
+            scrollRafHandle: null,
 
             get isCollapsed() {
                 return this.$store.sidebar.isCollapsed;
@@ -398,8 +400,8 @@
 
                     if ((containerHeight === 0 || containerWidth === 0) && retries < 8) {
                         const delay = Math.min(100 * Math.pow(1.5, retries), 1000);
-                        setTimeout(() => {
-                            requestAnimationFrame(() => attemptScroll(retries + 1));
+                        this.scrollTimeoutHandle = setTimeout(() => {
+                            this.scrollRafHandle = requestAnimationFrame(() => attemptScroll(retries + 1));
                         }, delay);
                         return;
                     }
@@ -428,6 +430,14 @@
             },
 
             destroy() {
+                if (this.scrollTimeoutHandle !== null) {
+                    clearTimeout(this.scrollTimeoutHandle);
+                    this.scrollTimeoutHandle = null;
+                }
+                if (this.scrollRafHandle !== null) {
+                    cancelAnimationFrame(this.scrollRafHandle);
+                    this.scrollRafHandle = null;
+                }
                 if ('scrollRestoration' in history && this.previousScrollRestoration !== null) {
                     history.scrollRestoration = this.previousScrollRestoration;
                 }