docs: fix pointer events

Author: DylanVann

packages/docs/index.js

@@ -115,17 +115,29 @@ mode.subscribe((m) => {
 
 // Get a floating button element.
 const floatingButtonEl = document.querySelector('.floating-button')
+const topBarEl = document.querySelector('.top-bar')
+let showingFloatingButton = false
 
 // Show this floating button when the user scrolls down.
 window.addEventListener(
   'scroll',
   () => {
     if (window.scrollY > 200) {
-      floatingButtonEl.classList.remove('opacity-0')
-      floatingButtonEl.classList.add('opacity-100')
+      if (!showingFloatingButton) {
+        floatingButtonEl.classList.remove('opacity-0')
+        floatingButtonEl.classList.add('opacity-100')
+        topBarEl.classList.remove('pointer-events-none')
+        topBarEl.classList.add('pointer-events-auto')
+        showingFloatingButton = true
+      }
     } else {
-      floatingButtonEl.classList.add('opacity-0')
-      floatingButtonEl.classList.remove('opacity-100')
+      if (showingFloatingButton) {
+        floatingButtonEl.classList.add('opacity-0')
+        floatingButtonEl.classList.remove('opacity-100')
+        topBarEl.classList.add('pointer-events-none')
+        topBarEl.classList.remove('pointer-events-auto')
+        showingFloatingButton = false
+      }
     }
   },
   { passive: true },

packages/docs/index.pug

@@ -21,7 +21,7 @@ html(data-pdm="light dark blue" lang="en")
             include ./index.css
     body
         - var outline = ['focus:outline-none focus:shadow-outline focus:border-yellow-300']
-        div.container.fixed.top-0.right-0.left-0.flex.flew-row.px-3.mt-3(class="md:mt-6")
+        div.container.fixed.top-0.right-0.left-0.flex.flew-row.px-3.mt-3.pointer-events-none.top-bar(class="md:mt-6")
             button.rounded-sm.pdm-cycle.ml-auto.floating-button.opacity-0.transition-opacity.duration-300.ease-in-out(style="visibility: hidden;" class=outline)
                 i.emoji.light.pdm-emoji
         div.container.px-3.mb-3