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">