nico
/
spartacus-inventur-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

feat: make burger menu toggable on touch devices

This commit is contained in:
mmmchimps 2023-01-26 17:41:47 +01:00
parent cdbbd64cdd
commit f5eaf97083
2 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/List.svelte
View File

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

39
src/lib/Navbar.svelte
View File

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