Update

devplacepy/static/css/base.css

@@ -539,7 +539,7 @@ img {
 .topnav-icon { position: relative; padding: 0.375rem; color: var(--text-secondary); font-size: 1.25rem; background: none; border: none; cursor: pointer; font-family: inherit; line-height: 1; }
 .topnav-icon:hover { color: var(--text-primary); }
 .nav-badge {
-    position: absolute; top: 0; right: 0; min-width: 16px; height: 16px;
+    position: absolute; top: 0; right: 0; z-index: 1; min-width: 16px; height: 16px;
     padding: 0 0.25rem; border-radius: 8px; background: var(--accent); color: var(--white);
     font-size: 0.6875rem; font-weight: 700;
     display: flex; align-items: center; justify-content: center;
@@ -568,7 +568,8 @@ img {
     padding: 0.25rem 0;
     z-index: 1001;
 }
-.topnav-user-dropdown:hover .dropdown-menu { display: block; }
+.topnav-user-dropdown:hover .dropdown-menu,
+.topnav-user-dropdown.open .dropdown-menu { display: block; }
 .dropdown-item {
     display: block;
     padding: 0.5rem 0.875rem;

devplacepy/static/js/MobileNav.js

@@ -3,6 +3,7 @@ export class MobileNav {
         this.initMobileNav();
         this.initMessagesResponsive();
         this.initMessageThread();
+        this.initProfileDropdown();
     }
 
     initMobileNav() {
@@ -92,4 +93,28 @@ export class MobileNav {
         const thread = document.querySelector(".messages-thread");
         if (thread) thread.scrollTop = thread.scrollHeight;
     }
+
+    initProfileDropdown() {
+        const dropdown = document.querySelector(".topnav-user-dropdown");
+        if (!dropdown) return;
+        const btn = dropdown.querySelector(".topnav-user");
+        if (!btn) return;
+
+        btn.addEventListener("click", (e) => {
+            e.stopPropagation();
+            dropdown.classList.toggle("open");
+        });
+
+        document.addEventListener("click", (e) => {
+            if (!dropdown.contains(e.target)) {
+                dropdown.classList.remove("open");
+            }
+        });
+
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                dropdown.classList.remove("open");
+            }
+        });
+    }
 }

devplacepy/templates/base.html

@@ -81,14 +81,15 @@
                     <span class="nav-badge" data-counter-badge {% if unread_count == 0 %}hidden{% endif %}>{{ unread_count }}</span>
                 </a>
                 <div class="topnav-user-dropdown">
-                    <a href="/profile/{{ user['username'] }}" class="topnav-user">
+                    <button type="button" class="topnav-user" aria-label="User menu">
                         <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
                         <div class="topnav-user-info">
                             <span class="topnav-user-name">{{ user['username'] }}</span>
                             {% if is_admin(user) %}<span class="topnav-user-role">{{ user['role'] }}</span>{% endif %}
                         </div>
-                    </a>
+                    </button>
                     <div class="dropdown-menu">
+                        <a href="/profile/{{ user['username'] }}" class="dropdown-item"><span class="icon">👤</span> Profile</a>
                         <a href="/devii/" class="dropdown-item" data-devii-open><span class="icon">🤖</span> Devii</a>
                         <a href="/bookmarks/saved" class="dropdown-item"><span class="icon">🔖</span> Saved</a>
                         <a href="/auth/logout" class="dropdown-item"><span class="icon">🚪</span> Logout</a>