profile link to nav sidebar

packages/app/src/Pages/Layout/NavSidebar.tsx

@@ -1,6 +1,10 @@
 import { LogoHeader } from "./LogoHeader";
 import { Link } from "react-router-dom";
 import Icon from "@/Icons/Icon";
+import {ProfileLink} from "../../Element/User/ProfileLink";
+import Avatar from "../../Element/User/Avatar";
+import useLogin from "../../Hooks/useLogin";
+import {useUserProfile} from "@snort/system-react";
 
 const MENU_ITEMS = [
   {
@@ -26,6 +30,14 @@ const MENU_ITEMS = [
 ];
 
 export default function NavSidebar() {
+  const { publicKey } = useLogin(s => ({
+    publicKey: s.publicKey,
+    latestNotification: s.latestNotification,
+    readNotifications: s.readNotifications,
+    readonly: s.readonly,
+  }));
+  const profile = useUserProfile(publicKey);
+
   return (
     <div className="sticky border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex xl:w-56 flex-col px-2 py-4 flex-shrink-0 gap-2">
       <LogoHeader />
@@ -43,6 +55,14 @@ export default function NavSidebar() {
           ))}
         </div>
       </div>
+      {publicKey ? (
+        <ProfileLink pubkey={publicKey} user={profile}>
+          <div className="flex flex-row items-center">
+            <Avatar pubkey={publicKey} user={profile} size={40} />
+            <span className="hidden xl:inline ml-2">{profile?.name}</span>
+          </div>
+        </ProfileLink>
+      ) : ''}
     </div>
   );
 }