Map-Jurnal/src/lib/layout/TopBar.svelte

<script>
  import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';

  let { screen, onNavigate } = $props();

  let user = $derived(getUser());
  let profile = $derived(getUserProfile());

  let menuOpen = $state(false);

  function toggleMenu() {
    menuOpen = !menuOpen;
  }

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

<div class="topbar">
  <div class="left">
    <span class="app-name">Map Journal</span>
  </div>

  <div class="center">
    <div class="segmented">
      <div
        class="slider"
        style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
      ></div>
      <button onclick={() => onNavigate('worldmap')}>Worldmap</button>
      <button onclick={() => onNavigate('timeline')}>Timeline</button>
    </div>
  </div>

  <div class="right">
    {#if user}
      <div class="avatar-wrapper">
        <button class="avatar-btn" onclick={toggleMenu} onkeydown={(e) => { if (e.key === 'Enter') toggleMenu(); }}>
          <img
            src={user.photoURL || '/profile.jpg'}
            alt="Profile"
            class="avatar"
          />
        </button>
        {#if menuOpen}
          <div class="dropdown-menu">
            <div class="menu-header">
              <span class="menu-name">{profile?.displayName || user.displayName}</span>
              <span class="menu-email">{user.email}</span>
            </div>
            <div class="divider"></div>
            <button class="menu-item" onclick={handleSignOut}>Sign out</button>
          </div>
        {/if}
      </div>
    {/if}
  </div>

  {#if menuOpen}
    <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
  {/if}
</div>

<style>
  .topbar {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    gap: 16px;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
  }

  .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .app-name {
    font-family: var(--heading);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-h);
    white-space: nowrap;
  }

  .center {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .segmented {
    position: relative;
    display: flex;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
  }

  .slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: var(--bg);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: transform 0.25s ease;
    pointer-events: none;
  }

  .segmented button {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 4px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 300;
    color: var(--text);
    letter-spacing: 0.01em;
  }

  .right {
    display: flex;
    align-items: center;
  }

  .avatar-wrapper {
    position: relative;
  }

  .avatar-btn {
    display: flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
  }

  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: var(--shadow);
    z-index: 50;
  }

  .menu-header {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .menu-name {
    font: 600 14px/1.3 sans-serif;
    color: var(--text-h);
  }

  .menu-email {
    font: 400 12px/1.3 sans-serif;
    color: var(--text-sub);
  }

  .divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
  }

  .menu-item {
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    text-align: left;
    font: 400 14px/1.4 sans-serif;
    color: #ef4444;
    cursor: pointer;
    transition: background 0.15s;
  }

  .menu-item:hover {
    background: var(--bg-subtle);
  }

  .backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    border: none;
    background: transparent;
    cursor: default;
  }
</style>