Add vegeburger menu backdrop

src/back/routes/common/navbar.css

@@ -52,6 +52,10 @@ nav {
 		display: none;
 	}
 
+	.hamburger-backdrop {
+		display: none;
+	}
+
 	@media (max-width: 1000px) {
 		.hamburger-menu-toggle {
 			display: flex;
@@ -77,6 +81,7 @@ nav {
 			padding: 12px;
 			padding-top: 2px;
 			align-items: flex-end;
+			z-index: 10;
 
 			ul {
 				display: flex !important;
@@ -110,6 +115,19 @@ nav {
 				opacity: 1;
 				pointer-events: all;
 			}
+
+			.hamburger-backdrop {
+				display: block;
+				position: fixed;
+				top: 0;
+				left: 0;
+				height: 100vh;
+				width: 100vw;
+				background-color: #0000002b;
+				cursor: pointer;
+				z-index: 2;
+				backdrop-filter: blur(2px);
+			}
 		}
 	}
 }

src/back/routes/common/navbar.ts

@@ -27,6 +27,8 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
 		)
 		.join("\n");
 
+	const checkbox_id = `hamburger-menu-toggle-checkbox`;
+
 	return tempstream /* HTML */ `<nav>
 			<a href="/" class="nav-logo">
 				<img
@@ -41,17 +43,18 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
 				${linksHTML}
 			</ul>
 			<div class="hamburger-menu-toggle">
-				<input type="checkbox" id="hamburger-menu-toggle-checkbox" />
+				<input type="checkbox" id="${checkbox_id}" />
 				<label
-					for="hamburger-menu-toggle-checkbox"
+					for="${checkbox_id}"
 					class="hamburger-menu__icon hamburger-menu__open-icon"
 				>
 					${icon("hamburger")}
 				</label>
 			</div>
+			<label for="${checkbox_id}" class="hamburger-backdrop"></label>
 			<div class="hamburger-menu">
 				<label
-					for="hamburger-menu-toggle-checkbox"
+					for="${checkbox_id}"
 					class="hamburger-menu__icon hamburger-menu__close-icon"
 				>
 					${icon("hamburger-close")}