From 496f54cedd7ba9d9e173fded5a7ed9c68be65dd0 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Tue, 23 Sep 2025 19:43:51 +0000
Subject: [PATCH] feat(dees-pdf-viewer): add toggle button for sidebar
 visibility and enhance thumbnail re-rendering logic

---
 ts_web/elements/dees-pdf-viewer/component.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ts_web/elements/dees-pdf-viewer/component.ts b/ts_web/elements/dees-pdf-viewer/component.ts
index 9c5e92b..e0d5b8e 100644
--- a/ts_web/elements/dees-pdf-viewer/component.ts
+++ b/ts_web/elements/dees-pdf-viewer/component.ts
@@ -158,6 +158,13 @@ export class DeesPdfViewer extends DeesElement {
             </div>
 
             <div class="toolbar-group toolbar-group--end">
+              <button
+                class="toolbar-button"
+                @click=${() => this.showSidebar = !this.showSidebar}
+                title="${this.showSidebar ? 'Hide thumbnails' : 'Show thumbnails'}"
+              >
+                <dees-icon icon="${this.showSidebar ? 'lucide:SidebarClose' : 'lucide:Sidebar'}"></dees-icon>
+              </button>
               <button
                 class="toolbar-button"
                 @click=${this.downloadPdf}
@@ -283,11 +290,15 @@ export class DeesPdfViewer extends DeesElement {
       await this.loadPdf();
     }
 
-    // Only re-render thumbnails when sidebar becomes visible and document is loaded
-    if (changedProperties.has('showSidebar') && this.showSidebar && this.pdfDocument && this.renderState === 'rendered') {
+    // Re-render thumbnails when sidebar becomes visible and document is loaded
+    if (changedProperties.has('showSidebar') && this.showSidebar && this.pdfDocument) {
       // Use requestAnimationFrame to ensure DOM is ready
       await new Promise(resolve => requestAnimationFrame(resolve));
+      // Force re-render of thumbnails by resetting their rendered state
+      this.thumbnailData.forEach(thumb => thumb.rendered = false);
       await this.renderThumbnails();
+      // Re-setup intersection observer for lazy loading of pages
+      this.setupIntersectionObserver();
     }
   }
 
@@ -397,7 +408,6 @@ export class DeesPdfViewer extends DeesElement {
     if (!this.viewerMain) return;
 
     // Find visible pages based on scroll position
-    const scrollTop = this.viewerMain.scrollTop;
     const clientHeight = this.viewerMain.clientHeight;
 
     for (const pageInfo of this.pageData) {