fix: non-interactive dropdown

plugin.json

@@ -9,7 +9,8 @@
 	],
 	"scripts": [
 		"public/modules/autohidingnavbar.js",
-		"public/persona.js"
+		"public/persona.js",
+		"public/client.js"
 	],
 	"modules": {
 		"../admin/plugins/persona.js": "public/admin.js",

public/client.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 /*
 	Hey there!
@@ -15,5 +15,16 @@
 */
 
 $(document).ready(function () {
-	// Your code goes here
+	let open = $("html").hasClass("slideout-open");	
+	$("#menu").on("transitionstart", function () {
+		open = $("html").hasClass("slideout-open");
+		if (open) {
+			$("#menu-overlay").css("opacity", "0.6");
+		} else {
+			$("#menu-overlay").one("transitionend", function () {
+				$("#menu-overlay").hide();
+			});
+			$("#menu-overlay").css("opacity", "0");
+		}
+	});	
 });

public/modules/mobile-menu.js

@@ -83,6 +83,7 @@ define('persona/mobile-menu', [
 
 		function onBeforeOpen() {
 			document.documentElement.classList.add('slideout-open');
+			$("#menu-overlay").show();
 			const topOffset = $("#navstufz").outerHeight() + $("#header-menu").outerHeight();
 			document.body.style.setProperty("--panel-offset", `${topOffset}px`);
 			document.body.style.setProperty("--panel-width", `${navSlideout.width}px`);

scss/overrides.scss

@@ -108,10 +108,7 @@ nav#menu {
 	opacity: 0;
 	transition: all 200ms ease;
 	z-index: 999;
-}
-
-.slideout-open #menu-overlay {
-	opacity: 0.6;
+	display: none;
 }
 
 .slideout-open #menu::before {
@@ -120,4 +117,9 @@ nav#menu {
 
 .slideout-menu a {
 	color: var(--bs-body-color) !important;
+}
+
+#navstufz {
+	position: relative;
+	z-index: 100000;
 }