kullanıcı avatar denemesi.

src/main.js

@@ -10,13 +10,17 @@ let activeTab = "desktop";
 
 async function render() {
   const user = pb.authStore.model;
-  const avatar = pb.authStore.model?avatar;
 
   if (!user) {
     renderLogin();
     return;
   }
 
+  // Avatar resminin tam URL'ini oluşturuyoruz
+  const avatarUrl = user?.avatar
+    ? `https://pocketbase.iontalp.com/api/files/${user.collectionId}/${user.id}/${user.avatar}`
+    : null;
+
   let currentBg =
     user.selected_bg ||
     "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920";
@@ -25,7 +29,6 @@ async function render() {
   let currentPage;
   if (activeTab === "settings") {
     currentPage = await renderSettings(pb, currentBg, (newBg) => {
-      // Veritabanı güncellendiğinde yerel kullanıcı modelini tazeleyip render ediyoruz
       pb.authStore.model.selected_bg = newBg;
       render();
     });
@@ -35,11 +38,13 @@ async function render() {
 
   app.innerHTML = `
     <div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
+      <!-- Arka Plan Görseli -->
       <div class="absolute inset-0 z-0 bg-center bg-no-repeat transition-all duration-700" 
         style="background-image: url('${currentBg}'); background-size: 1920px 1080px;">
       </div>
-      <div class="absolute inset-0 z-1 bg-slate-950/50 "></div>
+      <div class="absolute inset-0 z-10 bg-slate-950/50 backdrop-blur-[2px]"></div>
 
+      <!-- Sol Menü (Sidebar) -->
       <aside class="relative z-30 w-72 h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col justify-between">
         <div>
           <h1 class="font-bold text-white mb-6 text-xl">Dashboard OS</h1>
@@ -48,11 +53,28 @@ async function render() {
             <button id="navSettings" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "settings" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">⚙️ Ayarlar</button>
           </nav>
         </div>
-        <button id="profileBtn" class="bg-rose-500/20 text-rose-300 py-2 rounded-xl border border-rose-500/30">
-          <image: url('${user&&user.avatar}');>
-        </button>
+
+        <!-- Profil / Çıkış Alanı -->
+        <div class="space-y-3 pt-4 border-t border-white/10">
+          <div id="profileBtn" class="flex items-center gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
+            ${
+              avatarUrl
+                ? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20" />`
+                : `<div class="w-10 h-10 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
+            }
+            <div class="overflow-hidden">
+              <p class="text-sm font-medium text-white truncate">${user.username || user.email}</p>
+              <p class="text-xs text-slate-400">Profili Gör</p>
+            </div>
+          </div>
+
+          <button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 py-2 rounded-xl border border-rose-500/30 text-sm font-medium transition-all">
+            🚪 Çıkış Yap
+          </button>
+        </div>
       </aside>
 
+      <!-- Ana İçerik -->
       <main id="mainContent" class="relative z-20 flex-1 h-screen p-8 flex items-center justify-center">
         ${currentPage.html}
       </main>
@@ -71,8 +93,8 @@ async function render() {
     activeTab = "settings";
     render();
   });
-  document.getElementById("profileBtn").addEventListener("click", () => {
-    activeTab = "profile";
+  document.getElementById("logoutBtn").addEventListener("click", () => {
+    pb.authStore.clear();
     render();
   });
 }