feat(dees-pdf-viewer): add toggle button for sidebar visibility and enhance thumbnail re-rendering logic

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
+    // Re-render thumbnails when sidebar becomes visible and document is loaded
-    if (changedProperties.has('showSidebar') && this.showSidebar && this.pdfDocument && this.renderState === 'rendered') {
+    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) {