From 53da7a41b4168875fb734c2e5d2c698db7b7f602 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Tue, 21 Jul 2026 15:49:37 +0200
Subject: [PATCH] Add vegeburger menu backdrop

---
 src/back/routes/common/navbar.css | 18 ++++++++++++++++++
 src/back/routes/common/navbar.ts  |  9 ++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/back/routes/common/navbar.css b/src/back/routes/common/navbar.css
index a7d15c5..4332c44 100644
--- a/src/back/routes/common/navbar.css
+++ b/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);
+			}
 		}
 	}
 }
diff --git a/src/back/routes/common/navbar.ts b/src/back/routes/common/navbar.ts
index e03ac50..e3bb0ad 100644
--- a/src/back/routes/common/navbar.ts
+++ b/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")}