From 90b08bf8ad52878bc027db0cac7014f75d662e15 Mon Sep 17 00:00:00 2001
From: fsegurai <fabiansegu@gmail.com>
Date: Fri, 6 Dec 2024 21:49:57 -0600
Subject: [PATCH] feat/new TOC validation for scrollspy component

---
 demo/src/app/app.component.ts                 | 20 +++++++----------
 .../scrollspy-nav-layout.component.html       | 22 ++++++++++---------
 .../scrollspy-nav-layout.component.ts         |  4 +++-
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
index e45fcb7..99cbec7 100644
--- a/demo/src/app/app.component.ts
+++ b/demo/src/app/app.component.ts
@@ -53,19 +53,15 @@ export class AppComponent implements OnInit {
   @HostListener('window:scroll')
   onWindowScroll(): void {
     const tabHeaderValue = this.tabHeader();
-    if (tabHeaderValue == null) {
-      return;
-    }
+    if (tabHeaderValue == null) return;
+
     const tabHeader = tabHeaderValue.nativeElement;
     const tabHeaderOffset = Math.ceil(tabHeader.offsetTop);
     const windowOffset = Math.ceil(window.scrollY);
     const hasStickyClass = tabHeader.classList.contains(this.stickyClassName);
-    if (!hasStickyClass && windowOffset >= tabHeaderOffset) {
-      tabHeader.classList.add(this.stickyClassName);
-    }
-    if (hasStickyClass && windowOffset < tabHeaderOffset) {
-      tabHeader.classList.remove(this.stickyClassName);
-    }
+
+    if (!hasStickyClass && windowOffset >= tabHeaderOffset) tabHeader.classList.add(this.stickyClassName);
+    if (hasStickyClass && windowOffset < tabHeaderOffset) tabHeader.classList.remove(this.stickyClassName);
   }
 
   ngOnInit(): void {
@@ -107,9 +103,9 @@ export class AppComponent implements OnInit {
     this.theme = theme;
     const bodyClassList = this.document.querySelector('body')!.classList;
     const removeClassList = /\w*-theme\b/.exec(bodyClassList.value);
-    if (removeClassList) {
-      bodyClassList.remove(...removeClassList);
-    }
+
+    if (removeClassList) bodyClassList.remove(...removeClassList);
+
     bodyClassList.add(`${ this.theme }-theme`);
     localStorage.setItem(LOCAL_STORAGE_THEME_KEY, this.theme);
   }
diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html
index 8937a50..814bb38 100644
--- a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html
+++ b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html
@@ -8,7 +8,7 @@
         [GitHub](https://github.com/fsegurai)
       </markdown>
     </div>
-    @if (showScrollUpButton) {
+    @if (displayTOC() && showScrollUpButton) {
       <button (click)="onScrollUp()" [@zoomAnimation] class="scrollup-button--fixed"
               color="accent"
               fxHide.gt-sm mat-fab>
@@ -16,13 +16,15 @@
       </button>
     }
   </div>
-  <div class="sticky" fxFlex="1 0 180px" fxFlexAlign="flex-start" fxHide.lt-md fxLayout="column">
-    <app-scrollspy-nav [headings]="headings()"></app-scrollspy-nav>
-    @if (showScrollUpButton) {
-      <button (click)="onScrollUp()" [@zoomAnimation] class="scrollup-button" color="accent"
-              mat-mini-fab>
-        <img src="icon-chevron-up.svg" alt="Scroll to top">
-      </button>
-    }
-  </div>
+  @if (displayTOC()) {
+    <div class="sticky" fxFlex="1 0 180px" fxFlexAlign="flex-start" fxHide.lt-md fxLayout="column">
+      <app-scrollspy-nav [headings]="headings()"></app-scrollspy-nav>
+      @if (showScrollUpButton) {
+        <button (click)="onScrollUp()" [@zoomAnimation] class="scrollup-button" color="accent"
+                mat-mini-fab>
+          <img src="icon-chevron-up.svg" alt="Scroll to top">
+        </button>
+      }
+    </div>
+  }
 </div>
diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts
index 9fdc01f..4987367 100644
--- a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts
+++ b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts
@@ -25,7 +25,9 @@ import { ZOOM_ANIMATION } from './scrollspy-nav-layout.animation';
 export class ScrollspyNavLayoutComponent {
   readonly headings = input<Element[]>();
 
-  showScrollUpButton = false;
+  readonly displayTOC = input<boolean>(true);
+
+  protected showScrollUpButton = false;
 
   @HostListener('window:scroll')
   onWindowScroll(): void {