add side stats panel

src/lib/layout/TopBar.svelte

@@ -0,0 +1,112 @@
+<script>
+  let { screen, onNavigate } = $props();
+</script>
+
+<div class="topbar">
+  <div class="left">
+    <img src="/logo.png" alt="Logo" class="logo" />
+    <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">
+    <img src="/profile.jpg" alt="Profile" class="avatar" />
+  </div>
+</div>
+
+<style>
+  .topbar {
+    height: 64px;
+    display: flex;
+    align-items: center;
+    padding: 0 24px;
+    background: #1e2937;
+    gap: 16px;
+    position: relative;
+    z-index: 10;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .logo {
+    width: 75px;
+    height: 75px;
+    border-radius: 10px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .app-name {
+    font: 700 20px/1.2 sans-serif;
+    color: #f1f5f9;
+    white-space: nowrap;
+  }
+
+  .center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .segmented {
+    position: relative;
+    display: flex;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 999px;
+    padding: 4px;
+    width: 300px;
+  }
+
+  .slider {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc(50% - 4px);
+    height: calc(100% - 8px);
+    background: #fff;
+    border-radius: 999px;
+    transition: transform 0.25s ease;
+    pointer-events: none;
+  }
+
+  .segmented button {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    padding: 10px 20px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font: 500 16px/1.4 sans-serif;
+    color: #cbd5e1;
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+  }
+
+  .avatar {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    object-fit: cover;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+</style>