Fix top menu collapsing issue (#2820)

- Fix top menu collapsing when opening dialog windows on mobile.
- Fix top menu not collapsing when switching from mobile to desktop.

Author: jevenski

css/style.css

@@ -643,6 +643,15 @@ div#tadd {max-width: 95vw;}
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) { 
   /* Custom rules for medium devices */
+  #top-menu.collapsing {
+    /*
+      prevent top menu blinking when:
+      1) switching from mobile to desktop
+      AND
+      2) the collapsible menu was open before switching.
+    */
+    display: none !important;
+  }
   #t .nav-link:hover {
     background: transparent url(../images/tb_bg.gif) no-repeat scroll left center;
     filter: none;

index.html

@@ -86,7 +86,7 @@
 						<div class="navbar-toggler-icon"></div>
 					</button>	
 				</div>
-				<div class="collapse navbar-collapse px-1 py-2 py-md-0" id="top-menu">
+				<div class="collapse navbar-collapse px-1 py-2 py-md-0" id="top-menu" data-bs-toggle="false">
 					<div class="navbar-nav flex-grow-1">
 						<div class="d-flex flex-row align-items-center flex-wrap flex-md-nowrap">
 							<a id="mnu_add" class="nav-link flex-grow-1" href="#" onclick="theWebUI.showAdd(); return(false);" onfocus="this.blur()" uilangtitle="mnu_add">

js/objects.js

@@ -208,9 +208,9 @@ var theDialogManager = {
 			// Close side panel on mobile:
 			// An offcanvas is a modal under the hood and will intercept focus events
 			// from other elements, and make other text inputs unfocusable and uneditable.
-			bootstrap.Offcanvas.getOrCreateInstance(document.querySelector("#offcanvas-sidepanel")).hide();
+			bootstrap.Offcanvas.getInstance("#offcanvas-sidepanel")?.hide();
 			// close collapsible top menu on opening dialog windows
-			bootstrap.Collapse.getOrCreateInstance("#top-menu").hide();
+			bootstrap.Collapse.getInstance("#top-menu")?.hide();
 		}
 
 		const obj = $('#' + id);

js/webui.js

@@ -2306,10 +2306,8 @@ var theWebUI =
 		theWebUI.resizeTop(null, h);
 		// center any open dialog
 		theDialogManager.visible.forEach(id => theDialogManager.center(id));
-		if ($(window).width < 768) {
-			// close collapsible top menu
-			bootstrap.Collapse.getOrCreateInstance("#top-menu").hide();
-		}
+		// close collapsible top menu
+		bootstrap.Collapse.getInstance("#top-menu")?.hide();
 	},
 
 	update: function()