lpk-website

commit b7d0cfc0bf13b60856d818fb534c21018f42c3e5
parent f1d826e2397a730b13b976af6b04e96c9c5a9b96
Author: Chris <chris@echoz.io>
Date:   Thu,  2 Feb 2023 04:42:04 +0100

feat: close hamburger menu when clicking anywhere else on-screen

Diffstat:
M
assets/css/extended/hamburger.css
 | 
16
+++++++++++++++-
M
layouts/partials/header.html
 | 
1
+

2 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/assets/css/extended/hamburger.css b/assets/css/extended/hamburger.css
@@ -6,7 +6,21 @@
   display: none;
 }
 
+.header #menu-capture {
+	display: none;
+}
+
 @media (max-width: 600px) {
+	.header #menu-button:checked ~ #menu-capture {
+		display: block;
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		height: 100%;
+		width: 100%;
+		z-index: 1;
+	}
+
 	.header #menu-icon {
   	cursor: pointer;
   	display: inline-block;
@@ -59,7 +73,7 @@
   	right: 0px;
   	background: var(--entry);
   	border-radius: var(--radius);
-  	z-index: 1;
+		z-index: 2;
 		clear: both;
 		border: 1px solid var(--border);
 		transform: scaleY(0);
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -121,6 +121,7 @@
         </div>
         {{- $currentPage := . }}
         <input id="menu-button" type="checkbox"/>
+        <label id="menu-capture" for="menu-button"></label>
         <label id="menu-icon" for="menu-button"><span></span></label>
         <ul id="menu">
             {{- range site.Menus.main }}