Profile menu oluşturuldu. Bağlantı ve Page'ler eklendi.

client/src/components/Topbar.svelte

@@ -1,13 +1,21 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { navigate } from "svelte-routing";
   import {
     activePlaceholder,
     activeSearchTerm,
     updateSearchTerm
   } from "../stores/searchStore.js";
 
+  import avatarSrc from "../assets/avatar.png";
+  import { clearTokens } from "../utils/api.js";
+
   const dispatch = createEventDispatcher();
   export let placeholder = "";
+  // Örnek avatar (yerel dosya)
+  export let avatarUrl = avatarSrc;
+  let showAvatarMenu = false;
+  let avatarWrap;
 
   const onToggle = () => dispatch("toggleMenu");
 
@@ -15,6 +23,41 @@
     updateSearchTerm(event.target.value);
   }
 
+  function toggleAvatarMenu() {
+    showAvatarMenu = !showAvatarMenu;
+  }
+
+  function goProfile() {
+    showAvatarMenu = false;
+    navigate("/profile");
+  }
+
+  function goSettings() {
+    showAvatarMenu = false;
+    navigate("/settings");
+  }
+
+  function logout() {
+    clearTokens();
+    showAvatarMenu = false;
+    window.location.replace("/login");
+  }
+
+  function handleDocumentClick(event) {
+    if (!showAvatarMenu) return;
+    if (avatarWrap && !avatarWrap.contains(event.target)) {
+      showAvatarMenu = false;
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleDocumentClick);
+  });
+
+  onDestroy(() => {
+    document.removeEventListener("click", handleDocumentClick);
+  });
+
   $: resolvedPlaceholder = placeholder || $activePlaceholder;
 </script>
 
@@ -37,6 +80,33 @@
       on:input={handleInput}
     />
   </div>
+
+  <div class="avatar-wrap" bind:this={avatarWrap}>
+    <button class="avatar" type="button" aria-label="Profil" on:click={toggleAvatarMenu}>
+      {#if avatarUrl}
+        <img src={avatarUrl} alt="Avatar" loading="lazy" />
+      {:else}
+        <i class="fa-solid fa-user"></i>
+      {/if}
+    </button>
+
+    {#if showAvatarMenu}
+      <div class="avatar-menu">
+        <button type="button" on:click={goProfile}>
+          <i class="fa-solid fa-user"></i>
+          Profile
+        </button>
+        <button type="button" on:click={goSettings}>
+          <i class="fa-solid fa-gear"></i>
+          Settings
+        </button>
+        <button type="button" class="logout" on:click={logout}>
+          <i class="fa-solid fa-right-from-bracket"></i>
+          Logout
+        </button>
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
@@ -85,4 +155,81 @@
       height: 36px;
     }
   }
+
+  .avatar {
+    border: none;
+    background: #f2f2f2;
+    border-radius: 10px;
+    width: 42px;
+    height: 42px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+
+  .avatar i {
+    color: #666;
+    font-size: 18px;
+  }
+
+  @media (max-width: 768px) {
+    .avatar {
+      width: 38px;
+      height: 38px;
+    }
+  }
+
+  .avatar-wrap {
+    position: relative;
+  }
+
+  .avatar-menu {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 8px);
+    background: #fff;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+    display: flex;
+    flex-direction: column;
+    min-width: 170px;
+    overflow: hidden;
+    z-index: 20;
+  }
+
+  .avatar-menu button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    background: #fff;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    color: #1c2440;
+  }
+
+  .avatar-menu button:hover {
+    background: #f3f4f7;
+  }
+
+  .avatar-menu i {
+    width: 18px;
+    text-align: center;
+  }
+
+  .avatar-menu .logout {
+    color: #c0392b;
+  }
 </style>