From 8ab9dda48a73ee34f740e3f5430b5c4d8298eec1 Mon Sep 17 00:00:00 2001
From: Danilo Bargen <mail@dbrgn.ch>
Date: Mon, 18 Mar 2024 19:10:07 +0100
Subject: [PATCH] Fix hamburger menu (#155)

---
 frontend/src/routes/+layout.svelte | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 45d3e301..35dbbf30 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,6 +3,12 @@
 
   import {loginState, refreshLoginState} from '$lib/stores';
 
+  let menuOpened = false;
+
+  function toggleMenu(): void {
+    menuOpened = !menuOpened;
+  }
+
   onMount(() => {
     refreshLoginState();
   });
@@ -22,13 +28,23 @@
       aria-label="menu"
       aria-expanded="false"
       data-target="navbar-contents"
+      tabindex="0"
+      class:is-active={menuOpened}
+      on:click={toggleMenu}
+      on:keydown={(event) => {
+        if (['Enter', ' '].includes(event.key)) {
+          event.stopPropagation();
+          event.preventDefault();
+          toggleMenu();
+        }
+      }}
     >
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
     </a>
   </div>
-  <div id="navbar-contents" class="navbar-menu">
+  <div id="navbar-contents" class="navbar-menu" class:is-active={menuOpened}>
     <div class="navbar-start">
       <a class="navbar-item" href="/">Home</a>
       {#if $loginState?.username}