feat: add more WIP

src/App.svelte

@@ -1,6 +1,8 @@
 <!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
 <script lang="ts">
-    import "../node_modules/bulma/css/bulma.min.css"
+    import "../node_modules/bulma/css/bulma.min.css";
     import Drink from "./lib/Drink.svelte";
     import Navbar from "./lib/Navbar.svelte";
 </script>
@@ -10,10 +12,4 @@
   <div class="container" id="drink-container">
     <Drink />
   </div>
-</main>
-
-<style>
-  #drink-container {
-    margin: 20px;
-  }
-</style>
+</main>

src/lib/Drink.svelte

@@ -1,10 +1,30 @@
 <!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
 <script lang="ts">
-    import {beers} from "../stores.js"
+    import { activeCategory, drinks } from "../stores.js";
+    import { fade, fly } from "svelte/transition";
 </script>
 
-<main>
-    {#each $beers as beer, name}
-        <h1>{beer.name}</h1>
-    {/each}
-</main>
+<section class="section">
+    <div class="container">
+        {#if $activeCategory == ""}
+            <article class="message is-info">
+                <div class="message-header">
+                    <p>hey!</p>
+                </div>
+                <div class="message-body">
+                    <p>waehle oben eine kategorie aus, um mit der inventur loszulegen.</p>
+                </div>
+            </article>
+        {:else}
+            {#each $drinks as drink, name}
+                {#if drink.type == $activeCategory}
+                    <div in:fly="{{ x: 200, duration: 300 }}" out:fly="{{ y: 400, duration: 0 }}" class="box">
+                        <h1>{drink.name}</h1>
+                    </div>
+                {/if}
+            {/each}
+        {/if}
+    </div>
+</section>

src/lib/Navbar.svelte

@@ -1,6 +1,14 @@
 <!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
 <script lang="ts">
-    let sparti_logo = "./src/assets/sparti_logo.png"
+    import { activeCategory } from "../stores";
+
+    let sparti_logo = "./src/assets/sparti_logo.png";
+
+    const setActiveCategory = (category: string) => {
+        $activeCategory = category;
+    }
 </script>
 
 <main>
@@ -12,16 +20,16 @@
         </div>
         <div id="navbar-menu">
             <div class="navbar-start">
-                <a class="navbar-item ">
+                <a class="navbar-item" on:click={() => setActiveCategory("beer")}>
                     Bier
                 </a>
-                <a class="navbar-item">
+                <a class="navbar-item" on:click={() => setActiveCategory("fizzyDrink")}>
                     Brause & Wasser
                 </a>
-                <a class="navbar-item">
+                <a class="navbar-item" on:click={() => setActiveCategory("wine")}>
                     Wein & Sekt
                 </a>
-                <a class="navbar-item">
+                <a class="navbar-item" on:click={() => setActiveCategory("spirit")}>
                     Schnaps & Sirup
                 </a>
             </div>

src/stores.js

@@ -1,10 +1,18 @@
-import { readable } from "svelte/store"
+import { readable, writable } from "svelte/store"
 
-export const beers = readable([
-    {
-        name: "PU",
-    },
-    {
-        name: "Sterni"
-    },
-]);
+export const drinks = readable([
+    // Biere
+    { name: "PU", type: "beer" },
+    { name: "Sterni", type: "beer" },
+
+    // Brause & Wasser
+    { name: "Brause 1", type: "fizzyDrink" },
+
+    // Wein & Sekt
+    // ... 
+
+    // Schnaps & Sirup
+    // ...
+])
+
+export const activeCategory = writable("")