chatrpg-app/src/routes/dashboard/DashboardNav.svelte

<script>
    import favicon from "$lib/assets/favicon.png";
</script>

<header>
    <a href="/dashboard" class="logo">
        <img src={favicon} alt="ChatRPG logo" width="32" height="32" />
        <span>ChatRPG</span>
    </a>
    <nav>
        <a href="/dashboard/tokens" class="nav-link">Tokens</a>
        <a href="/dashboard/games" class="nav-link">Games</a>
    </nav>
</header>

<style>
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2rem;
        height: 64px;
        border-bottom: 1px solid #1e1e28;
        position: sticky;
        top: 0;
        background: rgba(11, 11, 16, 0.85);
        backdrop-filter: blur(12px);
        z-index: 50;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #e5e5ea;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.5px;
    }

    nav {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.4rem 0.9rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #a1a1aa;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

    .nav-link:hover {
        background: #1a1a24;
        color: #e5e5ea;
    }
</style>