wiki-tcg/frontend/src/lib/header.svelte

<script>
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';

  function logout() {
    localStorage.removeItem('token');
    goto('/auth');
    close();
  }

  let menuOpen = $state(false);

  const links = [
    { href: '/',       label: 'Booster Packs' },
    { href: '/cards',  label: 'Cards' },
    { href: '/decks',  label: 'Decks' },
    { href: '/play',   label: 'Play' },
  ];

  function close() { menuOpen = false; }
</script>

<header>
  <a href="/" class="logo" onclick={close}>WikiTCG</a>

  <nav class="desktop">
    {#each links as link}
      <a href={link.href} class:active={$page.url.pathname === link.href}>{link.label}</a>
    {/each}
    <button class="logout" onclick={logout}>Log out</button>
  </nav>

  <button class="hamburger" onclick={() => menuOpen = !menuOpen} aria-label="Toggle menu">
    <span class:open={menuOpen}></span>
    <span class:open={menuOpen}></span>
    <span class:open={menuOpen}></span>
  </button>
</header>

{#if menuOpen}
  <div class="mobile-backdrop" onclick={close}></div>
  <nav class="mobile" class:open={menuOpen}>
    {#each links as link}
      <a href={link.href} class:active={$page.url.pathname === link.href} onclick={close}>{link.label}</a>
    {/each}
    <button class="logout mobile-logout" onclick={logout}>Log out</button>
  </nav>
{/if}

<style>
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

  header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 56px;
    background: #1a1008;
    border-bottom: 2px solid #6b4c1e;
  }

  .logo {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: #f0d080;
    text-decoration: none;
    letter-spacing: 0.05em;
  }

  nav.desktop {
    display: flex;
    gap: 2rem;
  }

  nav.desktop a {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240, 180, 80, 0.8);
    text-decoration: none;
    transition: color 0.15s;
    padding: 4px 0;
    border-bottom: 1.5px solid transparent;
  }

  nav.desktop a:hover,
  nav.desktop a.active {
    color: #f0d080;
    border-bottom-color: #f0d080;
  }

  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: auto;
  }

  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #f0d080;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }

  .hamburger span:nth-child(1).open { transform: translateY(7px) rotate(45deg); }
  .hamburger span:nth-child(2).open { opacity: 0; }
  .hamburger span:nth-child(3).open { transform: translateY(-7px) rotate(-45deg); }

  .mobile-backdrop {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 99;
    background: rgba(0,0,0,0.5);
  }

  nav.mobile {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 240px;
    z-index: 100;
    background: #1a1008;
    border-left: 2px solid #6b4c1e;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.25rem;
  }

  nav.mobile a {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240, 180, 80, 0.6);
    text-decoration: none;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(107, 76, 30, 0.3);
    transition: color 0.15s;
  }

  nav.mobile a:hover,
  nav.mobile a.active {
    color: #f0d080;
  }

  .logout {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200, 80, 80, 0.7);
    background: none;
    border: none;
    border-bottom: 1.5px solid transparent;
    cursor: pointer;
    padding: 4px 0;
    width: auto;
    transition: color 0.15s, border-color 0.15s;
  }

  .logout:hover {
    color: #c84040;
    border-bottom-color: #c84040;
  }

  .mobile-logout {
    font-size: 13px;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(107, 76, 30, 0.3);
    text-align: left;
  }

  @media (max-width: 640px) {
    nav.desktop { display: none; }
    .hamburger { display: flex; }
  }
</style>