feat(dees-pdf-viewer): add functionality to scroll thumbnail into view when sidebar is visible

ts_web/elements/dees-pdf-viewer/component.ts

@@ -504,12 +504,39 @@ export class DeesPdfViewer extends DeesElement {
       if (centerY >= relativeTop && centerY <= relativeBottom) {
         if (this.currentPage !== i + 1) {
           this.currentPage = i + 1;
+          // Scroll the thumbnail into view if sidebar is visible
+          if (this.showSidebar) {
+            this.scrollThumbnailIntoView(i + 1);
+          }
         }
         break;
       }
     }
   }
 
+  private scrollThumbnailIntoView(pageNum: number) {
+    const thumbnail = this.shadowRoot?.querySelector(`.thumbnail[data-page="${pageNum}"]`) as HTMLElement;
+    const sidebarContent = this.shadowRoot?.querySelector('.sidebar-content') as HTMLElement;
+
+    if (thumbnail && sidebarContent) {
+      // Get the thumbnail's position relative to the sidebar
+      const thumbnailRect = thumbnail.getBoundingClientRect();
+      const sidebarRect = sidebarContent.getBoundingClientRect();
+
+      // Check if thumbnail is outside the visible area
+      const isAbove = thumbnailRect.top < sidebarRect.top;
+      const isBelow = thumbnailRect.bottom > sidebarRect.bottom;
+
+      if (isAbove || isBelow) {
+        // Scroll the thumbnail into view, centering it if possible
+        thumbnail.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    }
+  }
+
   private async scrollToPage(pageNum: number, smooth: boolean = true) {
     await this.updateComplete;
     const pageWrapper = this.shadowRoot?.querySelector(`.page-wrapper[data-page="${pageNum}"]`) as HTMLElement;