backdrop for sidebar on smaller screens

apps/home/static/home/css/sidebar.css

@@ -1,4 +1,19 @@
 
+/* Backdrop */
+
+.sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    filter: blur(5rem);
+    background-color: rgba(var(--bs-secondary-rgb), 0.50);
+    z-index: 998;
+    display: none;  /* Must start as hidden! */
+}
+
+
 /* Show Sidebar Button */
 
 .reveal-sidebar-btn {
@@ -27,6 +42,7 @@
     color: var(--bs-body-color);
     background-color: var(--bs-secondary-bg-subtle);
     transition: transform 0.3s ease-in-out;
+    z-index: 999;
 }
 
 @media (max-width: 992px) {
@@ -39,7 +55,6 @@
     }
 
     .sidebar {
-        z-index: 999;
         position: fixed;
         left: 0;
         top: 0;

apps/home/static/home/js/index.js

@@ -259,10 +259,28 @@ function logError(error) {
 
 // region Sidebar Visibility
 
-$(".reveal-sidebar-btn").on("click", () => {
-    $(".sidebar").toggleClass("visible");
-});
+var _sidebarVisible = $(".sidebar").hasClass("visible");  // Applicable for smaller screens ONLY
+
+function getSidebarVisibility() {
+    return _sidebarVisible;
+}
+
+function setSidebarVisibility(show) {
+    _sidebarVisible = show;
+    if (show) {
+        $(".sidebar").addClass("visible");
+        $(".sidebar-backdrop").show();
+        return;
+    }
 
-$(".sidebar .btn-close").on("click", () => {
     $(".sidebar").removeClass("visible");
-});
+    $(".sidebar-backdrop").hide();
+}
+
+function toggleSidebarVisibility() {
+    setSidebarVisibility(!getSidebarVisibility());
+}
+
+$(".reveal-sidebar-btn").on("click", toggleSidebarVisibility);
+$(".sidebar .btn-close").on("click", () => setSidebarVisibility(false));
+$(".sidebar-backdrop").on("click", () => setSidebarVisibility(false));

apps/home/static/home/js/servers.js

@@ -131,7 +131,7 @@ function selectServer(id) {
     $("#selectedServerContainer").show().css("display", "flex");
 
     // Close sidebar on smaller screens
-    $(".sidebar").removeClass("visible");
+    setSidebarVisibility(false);
 
     // Announce change to any listeners
     $(document).trigger("selectedServerChange");

apps/home/templates/home/sidebar.html

@@ -1,5 +1,5 @@
 {% load static %}
-
+<div class="sidebar-backdrop"></div>
 <div class="sidebar">
     <div class="sidebar-header">
         <a href="/" class="sidebar-header-link me-auto">