add firebase and sign up

src/lib/layout/TopBar.svelte

@@ -1,5 +1,21 @@
 <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">
@@ -20,10 +36,34 @@
   </div>
 
   <div class="right">
-    <img src="/profile.jpg" alt="Profile" class="avatar" />
+    {#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>
 </div>
 
+{#if menuOpen}
+  <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
+{/if}
+
 <style>
   .topbar {
     height: 64px;
@@ -101,12 +141,85 @@
     align-items: center;
   }
 
+  .avatar-wrapper {
+    position: relative;
+  }
+
+  .avatar-btn {
+    display: flex;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
   .avatar {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     object-fit: cover;
-    cursor: pointer;
     flex-shrink: 0;
   }
+
+  .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    background: #1e2937;
+    border: 1px solid #334155;
+    border-radius: 10px;
+    padding: 8px 0;
+    min-width: 200px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    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: #f1f5f9;
+  }
+
+  .menu-email {
+    font: 400 12px/1.3 sans-serif;
+    color: #94a3b8;
+  }
+
+  .divider {
+    height: 1px;
+    background: #334155;
+    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: #fca5a5;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .menu-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    border: none;
+    background: transparent;
+    cursor: default;
+  }
 </style>