payfrit/payfrit-biz
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add user dropdown menu with Settings and Logout options

Browse source 
The user icon in the top-right header now opens a dropdown
with Settings and Logout links, making both accessible on mobile
where the sidebar is hidden.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-02-01 08:18:36 -08:00
parent 0258531c3d
commit 77fb8b9780
2 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
portal/index.html
View file

@ -139,10 +139,20 @@
<path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
</svg>
</button>
<div class="user-menu">
<button class="user-btn" id="userBtn">
<div class="user-menu" style="position: relative;">
<button class="user-btn" id="userBtn" onclick="Portal.toggleUserMenu()">
<span class="user-avatar" id="userAvatar">U</span>
</button>
<div id="userDropdown" style="display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 180px; z-index: 1000; overflow: hidden;">
<a href="#settings" onclick="Portal.navigate('settings'); Portal.toggleUserMenu();" style="display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--gray-700); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--gray-200);">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
Settings
</a>
<a href="#" onclick="Portal.logout(); return false;" style="display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--danger, #ef4444); text-decoration: none; font-size: 14px;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>
Logout
</a>
</div>
</div>
</div>
</header>

18
portal/portal.js
View file

@ -128,6 +128,24 @@ const Portal = {
}
},
// Toggle user dropdown menu
toggleUserMenu() {
const dd = document.getElementById('userDropdown');
if (!dd) return;
const showing = dd.style.display !== 'none';
dd.style.display = showing ? 'none' : 'block';
if (!showing) {
// Close on outside click
const close = (e) => {
if (!dd.contains(e.target) && e.target.id !== 'userBtn' && !e.target.closest('#userBtn')) {
dd.style.display = 'none';
document.removeEventListener('click', close);
}
};
setTimeout(() => document.addEventListener('click', close), 0);
}
},
// Logout
logout() {
localStorage.removeItem('payfrit_portal_token');