refactor: make mobile menu background full height, add "dimming" effect to main content when slideout menu is open

public/modules/mobile-menu.js

@@ -44,14 +44,18 @@ define('persona/mobile-menu', [
 			zIndex: 1000,
 		});
 		console.log("NAVSLIDEOUT", navSlideout);
+		document.body.style.setProperty("--panel-width", `${navSlideout.width}px`);
+		document.body.style.setProperty("--panel-offset", `${topOffset}px`);
 		navSlideout.styles = {
 			...navSlideout.styles,
 				base: {
 					...navSlideout.styles.base,
 					menu: {
 						...navSlideout.styles.base.menu,
+						transition: "all 200ms",
 						zIndex: 1000,
-						top: `${topOffset}px`,
+						top: `var(--panel-offset)`,
+						overflow: "visible auto"
 					}
 				}
 			}
@@ -80,14 +84,17 @@ define('persona/mobile-menu', [
 		function onBeforeOpen() {
 			document.documentElement.classList.add('slideout-open');
 			const topOffset = $("#navstufz").outerHeight() + $("#header-menu").outerHeight();
-			navSlideout.styles.base.menu.top = `${topOffset}px`;
+			document.body.style.setProperty("--panel-offset", `${topOffset}px`);
+			document.body.style.setProperty("--panel-width", `${navSlideout.width}px`);
+			navSlideout.styles.base.menu.top = `var(--panel-offset)`;
 			Object.assign(menuEl.style, navSlideout.styles.base.menu);
 		}
 
 		function onClose() {
 			$('#mobile-menu').blur();
+			menuEl.style.left = `calc(0px - var(--panel-width) - 100vw)`;
 			document.documentElement.classList.remove('slideout-open');
-			$('#panel').off('click', closeOnClick);
+			$('#panel,#menu-overlay').off('click', closeOnClick);
 		}
 
 		$(window).on('resize action:ajaxify.start', function () {
@@ -102,7 +109,7 @@ define('persona/mobile-menu', [
 			.on('closed', onClose)
 			.on('beforeopen', onBeforeOpen)
 			.on('opened', function () {
-				$('#panel').one('click', closeOnClick);
+				$('#panel,#menu-overlay').on('click', closeOnClick);
 			});
 
 		if (chatMenuVisible) {
@@ -130,6 +137,10 @@ define('persona/mobile-menu', [
 			});
 		}
 
+		menuEl.addEventListener('click', function(e) {
+			window.toggleTheme(document.documentElement.dataset.bsTheme !== 'dark');
+		});
+
 		$('#menu [data-section="navigation"] ul').html(
 			$('#main-nav').html() +
 			($('#logged-out-menu').html() || '')

scss/overrides.scss

@@ -77,3 +77,47 @@ $breadcrumb-item-padding-x: 12px !default;
 .form-control::placeholder, .bootstrap-tagsinput::placeholder {
 	color: $gray-500 !important;
 }
+
+nav#menu {
+	background-color: transparent !important;
+	display: flex;
+}
+
+#menu .menu-section {
+	height: 100%;
+	width: var(--panel-width) !important;
+	max-width: var(--panel-width) !important;
+	min-width: var(--panel-width) !important;
+	padding-top: 0 !important;
+	position: relative;
+	z-index: 1000;
+}
+
+#menu .menu-section-list {
+	height: 100%;
+	padding-top: 20px !important;
+}
+
+#menu-overlay {
+	position: absolute;
+	top: var(--panel-offset);
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #000;
+	opacity: 0;
+	transition: all 200ms ease;
+	z-index: 999;
+}
+
+.slideout-open #menu-overlay {
+	opacity: 0.6;
+}
+
+.slideout-open #menu::before {
+	width: calc(100vw + var(--panel-width));
+}
+
+.slideout-menu a {
+	color: var(--bs-body-color) !important;
+}

templates/header.tpl

@@ -66,6 +66,7 @@
 	<nav id="menu" class="slideout-menu hidden">
 		<!-- IMPORT partials/slideout-menu.tpl -->
 	</nav>
+	<div id="menu-overlay"></div>
 	<nav id="chats-menu" class="slideout-menu hidden">
 		<!-- IMPORT partials/chats-menu.tpl -->
 	</nav>

theme.scss

@@ -1,4 +1,4 @@
 // override harmony font-path
 $font-path: "./plugins/nodebb-theme-quickstart";
 
-@import "../nodebb-theme-harmony/theme";
+@import "../nodebb-theme-persona/theme";