feat: make burger menu toggable on touch devices

src/lib/List.svelte

@@ -21,9 +21,24 @@
         {#if $activeCategory == ""}
             <Info />
         {:else}
-            {#each filteredDrinks as drink (drink.name)}
+            <div class="block">
-                <Drink drinkName={drink.name} /> 
+                <div class="subtitle">
-            {/each}
+                    {#if $activeCategory === "beer"}
+                        <strong>Bier 🍺</strong>
+                    {:else if $activeCategory === "fizzyDrink"}
+                        <strong>Brause & Wasser 💧</strong>
+                    {:else if $activeCategory === "wine"} 
+                        <strong>Wein 🍷</strong>
+                    {:else}
+                        <strong>Schnaps & Sirup 🥃</strong>
+                    {/if}
+                </div>
+            </div>
+            <div class="block">
+                {#each filteredDrinks as drink (drink.name)}
+                    <Drink drinkName={drink.name} /> 
+                {/each}
+            </div>
         {/if}
     </div>
 </section>

src/lib/Navbar.svelte

@@ -9,6 +9,14 @@
     let sparti_logo = "./src/assets/sparti_logo.png";
     let resetOrFinish = "";
     let modalWindow;
+    let burgerMenuActive = "";
+
+    const drinkCategories = [
+       {name: "beer", friendlyName: "Bier"},
+       {name: "fizzyDrink", friendlyName: "Brause & Wasser"},
+       {name: "wine", friendlyName: "Wein"},
+       {name: "spirit", friendlyName: "Schnaps & Sirup"},
+    ]
 
     const setActiveCategory = (category: string) => {
         $activeCategory = category;
@@ -17,6 +25,11 @@
     const setFinishKind = (kind: string) => {
         resetOrFinish = kind;
     }
+
+    const toggleBurgerMenu = () => {
+        burgerMenuActive = burgerMenuActive === "is-active" ? "" : "is-active"
+    }
+    
 </script>
 
 <nav class="navbar is-light is-spaced has-shadow is-fixed-top">
@@ -25,28 +38,24 @@
             <img src={sparti_logo} />
         </a>
 
-        <!--navbar auf mobile sichtbar machen!-->
+        <a role="button" class="navbar-burger {burgerMenuActive}" on:click={toggleBurgerMenu} aria-label="menu" aria-expanded="false" data-target="spartacusNavbar">
-        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="spartacusNavbar">
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
           </a>
 
     </div>
-    <div class="navbar-menu" id="spartacusNavbar">
+    <div class="navbar-menu {burgerMenuActive}" id="spartacusNavbar">
         <div class="navbar-start">
-            <a class="navbar-item" on:click={() => setActiveCategory("beer")}>
+            {#each drinkCategories as category (category.name)}
-                Bier
+            <a class="navbar-item" on:click={() => {
-            </a>
+                    setActiveCategory(category.name);
-            <a class="navbar-item" on:click={() => setActiveCategory("fizzyDrink")}>
+                    toggleBurgerMenu();
-                Brause & Wasser
+                    }
-            </a>
+                }>
-            <a class="navbar-item" on:click={() => setActiveCategory("wine")}>
+                {category.friendlyName}
-                Wein & Sekt
+                </a>
-            </a>
+            {/each}
-            <a class="navbar-item" on:click={() => setActiveCategory("spirit")}>
-                Schnaps & Sirup
-            </a>
         </div>
 
         <div class="navbar-end">