From f5eaf970834b5c4bbb05ec9dc88843c26b5a98b0 Mon Sep 17 00:00:00 2001
From: mmmchimps <mmmchimps@posteo.me>
Date: Thu, 26 Jan 2023 17:41:47 +0100
Subject: [PATCH] feat: make burger menu toggable on touch devices
---
src/lib/List.svelte | 21 ++++++++++++++++++---
src/lib/Navbar.svelte | 39 ++++++++++++++++++++++++---------------
2 files changed, 42 insertions(+), 18 deletions(-)
diff --git a/src/lib/List.svelte b/src/lib/List.svelte
index ee99171..7910830 100644
--- a/src/lib/List.svelte
+++ b/src/lib/List.svelte
@@ -21,9 +21,24 @@
{#if $activeCategory == ""}
<Info />
{:else}
- {#each filteredDrinks as drink (drink.name)}
- <Drink drinkName={drink.name} />
- {/each}
+ <div class="block">
+ <div class="subtitle">
+ {#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>
\ No newline at end of file
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 8660e26..5eef854 100644
--- a/src/lib/Navbar.svelte
+++ b/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" aria-label="menu" aria-expanded="false" data-target="spartacusNavbar">
+ <a role="button" class="navbar-burger {burgerMenuActive}" on:click={toggleBurgerMenu} 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")}>
- Bier
- </a>
- <a class="navbar-item" on:click={() => setActiveCategory("fizzyDrink")}>
- Brause & Wasser
- </a>
- <a class="navbar-item" on:click={() => setActiveCategory("wine")}>
- Wein & Sekt
- </a>
- <a class="navbar-item" on:click={() => setActiveCategory("spirit")}>
- Schnaps & Sirup
- </a>
+ {#each drinkCategories as category (category.name)}
+ <a class="navbar-item" on:click={() => {
+ setActiveCategory(category.name);
+ toggleBurgerMenu();
+ }
+ }>
+ {category.friendlyName}
+ </a>
+ {/each}
</div>
<div class="navbar-end">