Change mobile menu technique to button with JS

assets/js/app.js

@@ -2,6 +2,7 @@ import './external_links';
 import './message_icons';
 import './forms';
 import './copyable_text';
+import './main_menu';
 
 import '../sass/app.scss';
 

assets/js/main_menu.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const menuButton = document.getElementById('menu-button');
+    const mainMenu = document.getElementById('main-menu');
+
+    menuButton.addEventListener('click', (e) => {
+        e.stopPropagation();
+        mainMenu.classList.toggle('open');
+    });
+
+    mainMenu.addEventListener('click', (e) => {
+        e.stopPropagation();
+    });
+
+    document.addEventListener('click', () => {
+        mainMenu.classList.remove('open');
+    });
+});

assets/sass/layout.scss

@@ -76,13 +76,13 @@ header {
 					}
 				}
 
-				a:hover {
+				a:hover, a:active {
 					background-color: rgba(255, 255, 255, 0.07);
 				}
 			}
 		}
 
-		.hamburger {
+		#menu-button {
 			display: none;
 		}
 	}
@@ -90,17 +90,29 @@ header {
 	@media (max-width: $menuLayoutSwitchTreshold) {
 		flex-direction: row-reverse;
 
+		.logo {
+			padding: 0 16px 0 8px;
+			font-size: 24px;
+
+			img {
+				margin-right: 8px;
+			}
+		}
+
 		nav {
-			flex: 1;
+			#menu-button {
-			.hamburger {
 				display: block;
+				margin: 0;
 				padding: 0 16px;
+				line-height: $headerHeight;
+
 				cursor: pointer;
+				background: transparent;
+				border-radius: 0;
 
-				width: max-content;
+				.feather {
-
+					--icon-size: 28px;
-				&:hover {
+					margin: 0 8px;
-					width: auto;
 				}
 			}
 
@@ -112,10 +124,10 @@ header {
 				transition: transform ease-out 150ms;
 
 				background-color: $headerBackground;
-			}
 
-			.hamburger:hover + ul, ul:hover {
+				&.open {
-				transform: translateX(0%);
+					transform: translateX(0%);
+				}
 			}
 		}
 	}

views/layouts/base.njk

@@ -14,8 +14,8 @@
 {% block header %}
     <a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> {{ app.name }}</a>
     <nav>
-        <div class="hamburger"><i data-feather="menu"></i></div>
+        <button id="menu-button"><i data-feather="menu"></i></button>
-        <ul>
+        <ul id="main-menu">
             <li><a href="{{ route('about') }}"><i data-feather="info"></i> About</a></li>
         </ul>
     </nav>