130 lines
6.4 KiB
Plaintext
130 lines
6.4 KiB
Plaintext
<header class="w-full bg-transparent p-2 fixed top-0 left-0 right-0 z-30 border-b border-white/3">
|
|
<div class="max-w-7xl mx-auto flex items-center justify-between px-3">
|
|
<div class="flex items-center gap-4">
|
|
<!-- small logo + name -->
|
|
<a href="/" class="flex items-center gap-2 mr-2">
|
|
<div class="w-7 h-7">
|
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
|
|
<defs><linearGradient id="navg" x1="0" x2="1"><stop offset="0%" stop-color="#06b6d4"/><stop offset="100%" stop-color="#3b82f6"/></linearGradient></defs>
|
|
<circle cx="50" cy="50" r="42" fill="url(#navg)"/>
|
|
<g transform="translate(50,50)"><path d="M-12,-4 L0,-18 L12,-4 L0,12 Z" fill="#fff"/></g>
|
|
</svg>
|
|
</div>
|
|
<span class="text-white font-semibold hidden sm:inline"><%= appName %></span>
|
|
</a>
|
|
<!-- mini guild selector compact -->
|
|
<div class="hidden md:block">
|
|
<button id="miniGuildBtn" class="px-3 py-1 rounded-full bg-white/5 text-white flex items-center gap-2" aria-expanded="false" aria-controls="miniGuildList">
|
|
<span id="miniGuildName" class="text-sm"><%= selectedGuildName || 'Seleccionar servidor' %></span>
|
|
<svg class="w-3 h-3 text-white/80" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<div id="miniGuildList" class="origin-top-left absolute left-4 mt-12 w-72 bg-white/6 backdrop-blur rounded-md p-2 hidden transition-transform duration-150" style="max-height:20rem; overflow:auto;">
|
|
<% if (guilds && guilds.length) { %>
|
|
<% guilds.forEach(g => { %>
|
|
<div class="p-2 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-2" data-id="<%= g.id %>">
|
|
<% if (g.icon) { %>
|
|
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-6 h-6 rounded-full" alt="icon">
|
|
<% } else { %>
|
|
<div class="w-6 h-6 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
|
|
<% } %>
|
|
<div class="flex-1 text-sm truncate"><%= g.name %></div>
|
|
</div>
|
|
<% }) %>
|
|
<% } else { %>
|
|
<div class="p-2 text-slate-300">No servers</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<% if (user) { %>
|
|
<div class="relative">
|
|
<button id="userBtn" class="flex items-center gap-2 px-2 py-1 rounded-full hover:bg-white/5 focus:outline-none" aria-expanded="false">
|
|
<% if (user.id && user.avatar) { %>
|
|
<img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png" class="w-8 h-8 rounded-full" alt="avatar">
|
|
<% } else { %>
|
|
<img src="/assets/images/snap1.svg" class="w-8 h-8 rounded-full" alt="avatar">
|
|
<% } %>
|
|
<svg class="w-3 h-3 text-white/80 ml-1" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<div id="userMenu" class="origin-top-right absolute right-0 mt-2 w-36 bg-white/6 backdrop-blur rounded-md p-2 hidden">
|
|
<a href="/auth/logout" class="block px-3 py-2 text-sm text-rose-300 hover:bg-white/5 rounded">Log out</a>
|
|
</div>
|
|
</div>
|
|
<% } else { %>
|
|
<a href="/auth/discord" class="text-sm text-white/70 px-3 py-2 rounded-md hover:bg-white/5">Entrar</a>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div style="height:56px"></div>
|
|
|
|
<script>
|
|
(function(){
|
|
const btn = document.getElementById('miniGuildBtn');
|
|
const list = document.getElementById('miniGuildList');
|
|
const userBtn = document.getElementById('userBtn');
|
|
const userMenu = document.getElementById('userMenu');
|
|
function openDropdown(el, container) {
|
|
if (!el || !container) return;
|
|
container.classList.remove('hidden');
|
|
// animate in
|
|
requestAnimationFrame(()=>{
|
|
container.classList.remove('scale-95','opacity-0','pointer-events-none');
|
|
container.classList.add('scale-100','opacity-100');
|
|
el.setAttribute('aria-expanded','true');
|
|
});
|
|
}
|
|
function closeDropdown(el, container) {
|
|
if (!el || !container) return;
|
|
container.classList.add('scale-95','opacity-0');
|
|
container.classList.remove('scale-100','opacity-100');
|
|
el.setAttribute('aria-expanded','false');
|
|
// after animation, hide to prevent tab focus
|
|
setTimeout(()=> container.classList.add('hidden','pointer-events-none'), 180);
|
|
}
|
|
if (btn && list) {
|
|
// ensure the dropdown itself is scrollable when many guilds exist
|
|
list.style.maxHeight = '20rem';
|
|
list.style.overflowY = 'auto';
|
|
btn.addEventListener('click', (e)=>{
|
|
e.stopPropagation();
|
|
const expanded = btn.getAttribute('aria-expanded') === 'true';
|
|
if (expanded) closeDropdown(btn, list); else openDropdown(btn, list);
|
|
});
|
|
Array.from(list.querySelectorAll('.guild-item')).forEach(it=>{
|
|
it.addEventListener('click', ()=>{
|
|
const id = it.getAttribute('data-id');
|
|
if (id) window.location.href = `/dashboard/${id}/overview`;
|
|
});
|
|
// keyboard activation (Enter / Space)
|
|
it.addEventListener('keydown', (ev)=>{
|
|
if (ev.key === 'Enter' || ev.key === ' ') {
|
|
ev.preventDefault();
|
|
it.click();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if (userBtn && userMenu) {
|
|
userBtn.addEventListener('click', (e)=>{
|
|
e.stopPropagation();
|
|
const expanded = userBtn.getAttribute('aria-expanded') === 'true';
|
|
if (expanded) closeDropdown(userBtn, userMenu); else openDropdown(userBtn, userMenu);
|
|
});
|
|
}
|
|
// close on outside click or Escape
|
|
document.addEventListener('click', (e)=>{
|
|
if (btn && list && !btn.contains(e.target) && !list.contains(e.target)) closeDropdown(btn, list);
|
|
if (userBtn && userMenu && !userBtn.contains(e.target) && !userMenu.contains(e.target)) closeDropdown(userBtn, userMenu);
|
|
});
|
|
document.addEventListener('keydown', (e)=>{
|
|
if (e.key === 'Escape') {
|
|
if (btn && list) closeDropdown(btn, list);
|
|
if (userBtn && userMenu) closeDropdown(userBtn, userMenu);
|
|
}
|
|
});
|
|
})();
|
|
</script>
|