theme: Fix TOC links broken after first click

Author: jmooring

assets/js/helpers/bridgeTurboAndAlpine.js

@@ -1,5 +1,8 @@
 export function bridgeTurboAndAlpine(Alpine) {
 	document.addEventListener('turbo:before-render', (event) => {
+		// Stop observing mutations before render
+		Alpine.stopObservingMutations();
+		
 		event.detail.newBody.querySelectorAll('[data-alpine-generated]').forEach((el) => {
 			if (el.hasAttribute('data-alpine-generated')) {
 				el.removeAttribute('data-alpine-generated');
@@ -9,10 +12,6 @@ export function bridgeTurboAndAlpine(Alpine) {
 	});
 
 	document.addEventListener('turbo:render', () => {
-		if (document.documentElement.hasAttribute('data-turbo-preview')) {
-			return;
-		}
-
 		document.querySelectorAll('[data-alpine-ignored]').forEach((el) => {
 			el.removeAttribute('x-ignore');
 			el.removeAttribute('data-alpine-ignored');
@@ -30,9 +29,6 @@ export function bridgeTurboAndAlpine(Alpine) {
 
 	// Cleanup Alpine state on navigation.
 	document.addEventListener('turbo:before-cache', () => {
-		// This will be restarted in turbo:render.
-		Alpine.stopObservingMutations();
-
 		document.body.querySelectorAll('[data-turbo-permanent]').forEach((el) => {
 			if (!el.hasAttribute('x-ignore')) {
 				el.setAttribute('x-ignore', true);
@@ -53,15 +49,5 @@ export function bridgeTurboAndAlpine(Alpine) {
 				el._x_teleport.setAttribute('data-alpine-generated', true);
 			}
 		});
-
-		document.body.querySelectorAll('[x-data]').forEach((el) => {
-			if (!el.hasAttribute('data-turbo-permanent')) {
-				Alpine.destroyTree(el);
-				// Turbo leaks DOM elements via their data-turbo-permanent handling.
-				// That needs to be fixed upstream, but until then.
-				let clone = el.cloneNode(true);
-				el.replaceWith(clone);
-			}
-		});
 	});
 }

assets/js/main.js

@@ -8,6 +8,9 @@ import focus from '@alpinejs/focus';
 
 var debug = 0 ? console.log.bind(console, '[index]') : function () {};
 
+// Expose Alpine to window for access from other modules/scripts
+window.Alpine = Alpine;
+
 // Set up and start Alpine.
 (function () {
 	// Register AlpineJS plugins.

layouts/_partials/layouts/header/mobilemenu.html

@@ -1,6 +1,7 @@
 {{/* Mobile menu overlay and panel - only visible on small screens */}}
 <div
   x-show="$store.nav.mobileMenu.open"
+  :class="$store.nav.mobileMenu.open ? 'pointer-events-auto' : 'pointer-events-none'"
   x-transition:enter="transition-opacity ease-out duration-200"
   x-transition:enter-start="opacity-0"
   x-transition:enter-end="opacity-100"
@@ -15,6 +16,7 @@
 {{/* Mobile menu panel */}}
 <div
   x-show="$store.nav.mobileMenu.open"
+  :class="$store.nav.mobileMenu.open ? 'pointer-events-auto' : 'pointer-events-none'"
   x-transition:enter="transition ease-out duration-200"
   x-transition:enter-start="translate-x-full"
   x-transition:enter-end="translate-x-0"

layouts/_partials/layouts/search/results.html

@@ -1,6 +1,6 @@
 <div
-  class="fixed inset-0 overflow-hidden z-20"
-  :class="{'fixed': open}"
+  class="fixed inset-0 overflow-hidden z-20 pointer-events-none"
+  :class="open && 'pointer-events-auto'"
   aria-label="Search docs"
   role="dialog"
   aria-modal="true"