v1.8.22: two-row header on mobile — row1: identity+account, row2: nav links
This commit is contained in:
Binary file not shown.
+17
-13
@@ -31,30 +31,34 @@
|
|||||||
<a href="${l.href}" ${l.onclick ? `onclick="${l.onclick}"` : ''}
|
<a href="${l.href}" ${l.onclick ? `onclick="${l.onclick}"` : ''}
|
||||||
class="glass glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-on-surface-variant hover:text-primary transition-colors">
|
class="glass glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-on-surface-variant hover:text-primary transition-colors">
|
||||||
<span class="msym text-base">${l.icon}</span>
|
<span class="msym text-base">${l.icon}</span>
|
||||||
<span class="hidden sm:inline">${l.label}</span>
|
<span>${l.label}</span>
|
||||||
</a>`).join('');
|
</a>`).join('');
|
||||||
|
|
||||||
// ── Header HTML ────────────────────────────────────────────────────────
|
// ── Header HTML ────────────────────────────────────────────────────────
|
||||||
const HEADER_HTML = `
|
const HEADER_HTML = `
|
||||||
<header class="sticky top-0 z-20 glass border-b border-primary/20">
|
<header class="sticky top-0 z-20 glass border-b border-primary/20">
|
||||||
<div class="max-w-6xl mx-auto px-4 lg:px-8 py-3 flex items-center justify-between gap-3">
|
<div class="max-w-6xl mx-auto px-4 lg:px-8">
|
||||||
<div class="flex items-center gap-3 shrink-0">
|
|
||||||
<a href="/" class="flex items-center gap-3">
|
<!-- Row 1: Identity + Account -->
|
||||||
<div class="w-9 h-9 bg-primary/15 rounded-xl flex items-center justify-center glow-sm brand-icon-wrap">
|
<div class="flex items-center justify-between py-3 gap-3">
|
||||||
<img id="brand-logo" class="hidden rounded-lg object-contain" style="height:40px"/>
|
<a href="/" class="flex items-center gap-3 min-w-0">
|
||||||
|
<div class="w-9 h-9 bg-primary/15 rounded-xl flex items-center justify-center shrink-0 glow-sm brand-icon-wrap">
|
||||||
|
<img id="brand-logo" class="hidden rounded-lg object-contain" style="height:32px"/>
|
||||||
<span id="brand-icon" class="msym text-primary text-lg">auto_awesome</span>
|
<span id="brand-icon" class="msym text-primary text-lg">auto_awesome</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="min-w-0">
|
||||||
<h1 class="text-sm font-bold text-primary leading-tight" id="brand-name">AfakZaid RAG</h1>
|
<h1 class="text-sm font-bold text-primary leading-tight truncate" id="brand-name">AfakZaid RAG</h1>
|
||||||
<p class="text-[10px] text-on-surface-variant/60 uppercase tracking-widest" id="brand-sub">Scholarly Intelligence</p>
|
<p class="text-[10px] text-on-surface-variant/60 uppercase tracking-widest truncate" id="brand-sub">Scholarly Intelligence</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="h-5 w-px bg-outline-variant/40"></div>
|
<div id="nav-auth" class="flex items-center gap-2 shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 2: Page Nav (always visible) -->
|
||||||
|
<div class="flex items-center gap-2 pb-2 border-t border-white/5 pt-2 overflow-x-auto scrollbar-none">
|
||||||
${navLinksHTML}
|
${navLinksHTML}
|
||||||
</div>
|
</div>
|
||||||
<nav class="flex items-center gap-2 shrink-0">
|
|
||||||
<div id="nav-auth" class="flex items-center gap-2"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
</header>`;
|
</header>`;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user