fix: moving header, flickering overlay

public/client.js

@@ -19,16 +19,15 @@ $(document).ready(function () {
 	$("#menu").on("transitionstart", function () {
 		open = $("html").hasClass("slideout-open");
 		if (open) {
-			$("#menu-overlay").show({
-				complete: function () {
-					$("#menu-overlay").css("opacity", "0.6");
-				}
-			})
+			$("#menu-overlay").show().animate({
+				opacity: 0.6
+			}, 200)
 		} else {
-			$("#menu-overlay").one("transitionend", function () {
+			$("#menu-overlay").animate({
+				opacity: 0
+			}, 100, function () {
 				$("#menu-overlay").hide();
-			});
-			$("#menu-overlay").css("opacity", "0");
+			});	
 		}
 	});	
 });

public/modules/autohidingnavbar.js

@@ -42,7 +42,7 @@
       }
 
       autoHidingNavbar.element.addClass('navbar-hidden').animate({
-        top: -1 * parseInt(autoHidingNavbar.element.css('height'), 10) + autoHidingNavbar.settings.navbarOffset
+        top: parseInt(autoHidingNavbar.element.css('height'), 10) + autoHidingNavbar.settings.navbarOffset
       }, {
         queue: false,
         duration: autoHidingNavbar.settings.animationDuration

public/persona.js

@@ -5,7 +5,7 @@ $(document).ready(function () {
 	setupTaskbar();
 	setupEditedByIcon();
 	setupMobileMenu();
-	configureNavbarHiding();
+	// configureNavbarHiding();
 
 	$(window).on('resize', utils.debounce(configureNavbarHiding, 200));
 	$(window).on('resize', updatePanelOffset);
@@ -45,16 +45,16 @@ $(document).ready(function () {
 			lastBSEnv = env;
 			var navbarEl = $('[component="navbar"]');
 			navbarEl.autoHidingNavbar('destroy').removeData('plugin_autoHidingNavbar');
-			navbarEl.css('top', '');
+			navbarEl.css('top', '0');
 
-			hooks
+			/* hooks
 				.on('filter:navigator.scroll', (data) => {
 					navbarEl.autoHidingNavbar('setDisableAutohide', true);
 					return data;
 				})
 				.on('action:navigator.scrolled', () => {
 					navbarEl.autoHidingNavbar('setDisableAutohide', false);
-				});
+				}); */
 
 			hooks.fire('filter:persona.configureNavbarHiding', {
 				resizeEnvs: preference,
@@ -76,7 +76,7 @@ $(document).ready(function () {
 					}
 				}
 
-				navbarEl.off('show.autoHidingNavbar')
+				/* navbarEl.off('show.autoHidingNavbar')
 					.on('show.autoHidingNavbar', function () {
 						fixTopCss('');
 					});
@@ -84,7 +84,7 @@ $(document).ready(function () {
 				navbarEl.off('hide.autoHidingNavbar')
 					.on('hide.autoHidingNavbar', function () {
 						fixTopCss('0px');
-					});
+					}); */
 			});
 		});
 	}

scss/overrides.scss

@@ -106,7 +106,6 @@ nav#menu {
 	height: 100%;
 	background: #000;
 	opacity: 0;
-	transition: all 200ms ease;
 	z-index: 999;
 	display: none;
 }
@@ -122,4 +121,17 @@ nav#menu {
 #navstufz {
 	position: relative;
 	z-index: 100000;
+}
+
+nav#header-menu {
+	position: sticky;
+	top: 0;
+}
+
+[data-bs-theme="dark"] {
+	--bs-body-bg: #0f1314;
+}
+
+:root {
+	--bs-dark-rgb: 15, 19, 20;
 }

theme.scss

@@ -2,3 +2,5 @@
 $font-path: "./plugins/nodebb-theme-quickstart";
 
 @import "../nodebb-theme-persona/theme";
+
+@import "scss/overrides.scss";