recipes-leemorgan-dev/src/routes/+layout.svelte

<script>
    import "$lib/global.css";
	import logo from '$lib/assets/favicon.svg';
    import {page} from "$app/state";
    import {getNotifications} from "$lib/notifier.svelte.js";

	let {data, children} = $props();
    let notifications = getNotifications();
</script>

<svelte:head>
	<link rel="icon" href={logo} />
    <title>Recipes</title>
</svelte:head>

<header>
    <a class="logo" href="/">
        <img src={logo} alt="Site logo">
    </a>

    {#if page.url.pathname === "/"}
        {#if data.loggedIn === false}
            <a href="/login" class="button">Sign In</a>
            <a href="/register" class="button">Sign Up</a>
        {:else}
            <a href="dashboard" class="button">Dashboard</a>
            <a href="logout" class="button">Log Out</a>
        {/if}
    {/if}

    {#if page.url.pathname === "/register"}
        <a href="/login" class="button">Sign In</a>
    {/if}

    {#if page.url.pathname === "/login"}
        <a href="/register" class="button">Sign Up</a>
    {/if}

    <div class="notifications">
        {#each notifications as n}
            <p class="{n.type}">{n.message}</p>
        {/each}
    </div>
</header>

{@render children()}

<style>
    header{
        display: flex;
        align-items: center;
        height: 75px;
        width: 100%;
    }

    .logo{
        height: 90%;
        cursor: pointer;
    }

    .logo img{
        height: 100%;
        width: auto;
    }

    .notifications{
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: min(320px, calc(100vw - 2rem));
        pointer-events: none;
    }

    .notifications p{
        margin: 0;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        font-size: 0.9rem;
        line-height: 1.3;
        color: var(--color-text);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        pointer-events: auto;
    }

    .notifications p.success{
        border-color: var(--color-success);
    }

    .notifications p.warning{
        border-color: var(--color-warning);
    }

    .notifications p.error{
        border-color: var(--color-error);
    }
</style>