problem: can't see who's currently logged in

src/components/Login.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { ndk } from "$lib/ndk";
 	import { Button } from "@/components/ui/button";
+    import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+    import { Avatar } from "@nostr-dev-kit/ndk-svelte-components";
 	import { NDKNip07Signer } from "@nostr-dev-kit/ndk";
 	import { onMount } from "svelte";
 
@@ -9,6 +11,7 @@
             nip07();
         }
     })
+  $: pubkey = ""
 
     async function nip07() {
         document.body.appendChild(document.createElement('script')).src = 'https://unpkg.com/window.nostr.js/dist/window.nostr.js';
@@ -19,6 +22,7 @@
             const user = await signer.blockUntilReady();
             
             if (user) {
+                pubkey = user.pubkey
                 $ndk.signer = signer;
                 $ndk = $ndk
                 localStorage.setItem("signed-in", "true");
@@ -32,4 +36,21 @@
 <Button on:click={nip07}>
     <span class="hidden sm:block">Sign in</span>
 </Button>
-{/if}
+{:else}
+<DropdownMenu.Root>
+<DropdownMenu.Trigger asChild let:builder>
+    <Button builders={[builder]} variant="secondary" size="icon" class="rounded-full">
+        <Avatar ndk={$ndk} {pubkey} class="w-10 h-10 object-cover rounded-full flex-none" />
+        <span class="sr-only">Toggle user menu</span>
+    </Button>
+</DropdownMenu.Trigger>
+<DropdownMenu.Content align="end">
+    <DropdownMenu.Label>My Account</DropdownMenu.Label>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item>Settings</DropdownMenu.Item>
+    <DropdownMenu.Item>Support</DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item>Logout</DropdownMenu.Item>
+</DropdownMenu.Content>
+</DropdownMenu.Root>
+{/if}

src/layouts/SidePanelLayout.svelte

@@ -5,7 +5,6 @@
 	import Search from 'lucide-svelte/icons/search';
 
 	import { Button } from '$lib/components/ui/button/index.js';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import * as Sheet from '$lib/components/ui/sheet/index.js';
 	import { Rocket } from 'lucide-svelte';
@@ -88,22 +87,6 @@
 				</form>
 			</div>
 			<Login />
-			<DropdownMenu.Root>
-				<DropdownMenu.Trigger asChild let:builder>
-					<Button builders={[builder]} variant="secondary" size="icon" class="rounded-full">
-						<CircleUser class="h-5 w-5" />
-						<span class="sr-only">Toggle user menu</span>
-					</Button>
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content align="end">
-					<DropdownMenu.Label>My Account</DropdownMenu.Label>
-					<DropdownMenu.Separator />
-					<DropdownMenu.Item>Settings</DropdownMenu.Item>
-					<DropdownMenu.Item>Support</DropdownMenu.Item>
-					<DropdownMenu.Separator />
-					<DropdownMenu.Item>Logout</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu.Root>
 		</header>
 		<div class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6 overflow-auto">
 			<slot name="content"></slot>