feat(web-service): add reactive headlines and active state on navbar

src/web-service/frontend/src/lib/navigation/NavItem.svelte

@@ -1,37 +1,38 @@
 <script lang="ts">
-    import Home from "../../assets/svg/Home.svelte";
-    import List from "../../assets/svg/List.svelte";
-    import Cart from "../../assets/svg/Basket.svelte";
-    import Profile from "../../assets/svg/Profile.svelte";
+        import Home from "../../assets/svg/Home.svelte";
+        import List from "../../assets/svg/List.svelte";
+        import Cart from "../../assets/svg/Basket.svelte";
+        import Profile from "../../assets/svg/Profile.svelte";
+        import { page } from "$app/stores";
 
-    interface NavIcons {
-        label: string,
-        href: string,
-        component: typeof Home | typeof List | typeof  Cart | typeof  Profile,
-        ariaLabel: string
-    }
+        interface NavIcons {
+                label: string;
+                href: string;
+                component: typeof Home | typeof List | typeof Cart | typeof Profile;
+                ariaLabel: string;
+        }
 
-    const options: NavIcons[] = [
-        { label: 'home', href: "/", component: Home, ariaLabel: "Zur Startseite" },
-        { label: 'list', href: "/shopping-lists", component: List, ariaLabel: "Zu deinen Einkauftslisten" },
-        { label: 'cart', href: "/", component: Cart, ariaLabel: "Zu allen Händlern und deren Produkte" },
-        { label: 'profile', href: "/", component: Profile, ariaLabel: "Zu deinem Profil" },
-    ]
+        const options: NavIcons[] = [
+                { label: 'home', href: "/", component: Home, ariaLabel: "Zur Startseite" },
+                { label: 'list', href: "/shopping-lists", component: List, ariaLabel: "Zu deinen Einkaufslisten" },
+                { label: 'cart', href: "/merchants", component: Cart, ariaLabel: "Zu allen Händlern und deren Produkte" },
+                { label: 'profile', href: "/profile", component: Profile, ariaLabel: "Zu deinem Profil" },
+        ]
 
-    function getOptionByLabel(labelToFind: string): NavIcons {
-        return options.find(option => option.label === labelToFind) ?? options[0];
-    }
+        function getOptionByLabel(labelToFind: string): NavIcons {
+                return options.find(option => option.label === labelToFind) ?? options[0];
+        }
 
-    export let icon = 'home';
-    let currentOption = getOptionByLabel(icon);
-    let isActive: boolean = false;
+        export let icon = 'home';
+        $: currentPath = $page.url.pathname;
+        $: currentOption = getOptionByLabel(icon);
+        $: isActive = currentPath === currentOption.href;
 </script>
 
 <a
         href="{currentOption.href}"
         aria-label="{currentOption.ariaLabel}"
-        aria-current="{isActive}"
-        class="{isActive ? 'bg-green-light/25 text-green-dark hover:bg-green-light/50' : ' bg-gray-light text-black hover:bg-gray-dark/25'}
-                w-14 h-14 rounded-full flex items-center justify-center transition-all ease-in-out duration-300 sm:w-12 sm:h-12">
+        aria-current="{isActive ? 'page' : undefined}"
+        class="{isActive ? 'bg-green-light/25 text-green-dark hover:bg-green-light/50' : ' bg-gray-light text-black hover-bg-gray-dark/25'} w-14 h-14 rounded-full flex items-center justify-center transition-all ease-in-out duration-300 sm:w-12 sm:h-12">
         <svelte:component this="{currentOption.component}" classes="w-6 h-6"/>
 </a>

src/web-service/frontend/src/routes/+layout.svelte

@@ -2,9 +2,14 @@
     import "../styles/app.css";
     import Header from "$lib/Header.svelte";
     import NavBar from "$lib/navigation/NavBar.svelte";
+    import { page } from '$app/stores';
 </script>
 
-<Header headline="PriceWhisper"/>
+<svelte:head>
+    <title>{$page.data.metaTitle} | Price Whisper</title>
+</svelte:head>
+
+<Header headline="{$page.data.headline}"/>
 
 <main class="sm:ml-20 md:ml-24 lg:max-w-4xl lg:mx-auto xl:max-w-5xl">
     <slot></slot>

src/web-service/frontend/src/routes/+page.svelte

@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
     import Euro from "../assets/svg/Euro.svelte";
+    export let data;
 </script>
 
 <section class="mx-5 mt-8 rounded-2xl bg-blue-light/50 p-5 lg:p-8">

src/web-service/frontend/src/routes/+page.ts

@@ -0,0 +1,6 @@
+export function load(): object {
+    return {
+        metaTitle: 'Starseite',
+        headline: 'Price Whisper',
+    };
+}

src/web-service/frontend/src/routes/merchants/+page.ts

@@ -0,0 +1,6 @@
+export function load(): object {
+    return {
+        metaTitle: 'Auflistung der Supermärkte',
+        headline: 'Alle verfügbaren Supermärkte',
+    };
+}

src/web-service/frontend/src/routes/profile/+page.ts

@@ -0,0 +1,6 @@
+export function load(): object {
+    return {
+        metaTitle: 'Deine Profil-Einstellungen',
+        headline: 'Dein Profil',
+    };
+}

src/web-service/frontend/src/routes/shopping-lists/+page.svelte

@@ -2,7 +2,7 @@
     import ShoppingListItem from "$lib/ShoppingListItem.svelte";
 </script>
 
-<h2 class="px-5 text-gray-dark text-sm font-medium mt-10 lg:text-base">
+<h2 class="px-5 text-gray-dark text-sm font-medium mt-6 lg:mt-10 lg:text-base">
     Offene Einkaufslisten
 </h2>
 <ul class="px-5 mt-4 grid grid-cols-1 gap-y-4 lg:gap-y-6 lg:mt-6">

src/web-service/frontend/src/routes/shopping-lists/+page.ts

@@ -0,0 +1,6 @@
+export function load(): object {
+    return {
+        metaTitle: 'Auflistung deiner Einkaufslisten',
+        headline: 'Deine Einkaufslisten',
+    };
+}