Update AppLayout.tsx

client/src/components/Layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState, useRef, useEffect } from 'react';
 import { useAuthStore } from '../../store/authStore';
 import { useNavigate, useLocation } from 'react-router-dom';
 import {
@@ -17,6 +17,18 @@ export default function AppLayout({ children, sidebarContent, showSidebar }: App
   const navigate = useNavigate();
   const location = useLocation();
   const isEditor = location.pathname.startsWith('/project/');
+  const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const profileRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (profileRef.current && !profileRef.current.contains(e.target as Node)) {
+        setShowProfileMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
   return (
     <div className="min-h-screen bg-surface-950 flex flex-col">
@@ -46,16 +58,33 @@ export default function AppLayout({ children, sidebarContent, showSidebar }: App
               <span className="text-surface-300 text-sm hidden md:block">
                 {user.username}
               </span>
-              <div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-medium">
-                {user.username.charAt(0).toUpperCase()}
+              <div className="relative" ref={profileRef}>
+                <button
+                  onClick={() => setShowProfileMenu(!showProfileMenu)}
+                  className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-medium hover:bg-primary-500 transition-colors"
+                >
+                  {user.username.charAt(0).toUpperCase()}
+                </button>
+                {showProfileMenu && (
+                  <div className="absolute right-0 top-full mt-2 w-48 bg-surface-800 border border-surface-700 rounded-lg shadow-xl py-1 z-50">
+                    <button
+                      onClick={() => { setShowProfileMenu(false); /* TODO: navigate to settings */ }}
+                      className="w-full flex items-center gap-2 px-4 py-2 text-sm text-surface-200 hover:bg-surface-700 transition-colors"
+                    >
+                      <Settings className="w-4 h-4" />
+                      Settings
+                    </button>
+                    <div className="border-t border-surface-700 my-1" />
+                    <button
+                      onClick={() => { logout(); navigate('/login'); }}
+                      className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-400 hover:bg-surface-700 transition-colors"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      Logout
+                    </button>
+                  </div>
+                )}
               </div>
-              <button
-                onClick={() => { logout(); navigate('/login'); }}
-                className="btn-ghost p-2"
-                title="Logout"
-              >
-                <LogOut className="w-4 h-4" />
-              </button>
             </>
           )}
         </div>