colorlink/afakzaid-rag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.8.22: two-row header on mobile — row1: identity+account, row2: nav links

Browse Source
This commit is contained in:
colorlink
2026-05-28 21:56:39 +00:00
parent c534c00b16
commit e1a4b2ae11
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/components.js
+17 -13
View File
@@ -31,30 +31,34 @@
<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">
<span class="msym text-base">${l.icon}</span>
<span class="hidden sm:inline">${l.label}</span>
<span>${l.label}</span>
</a>`).join('');
// ── Header HTML ────────────────────────────────────────────────────────
const HEADER_HTML = `
<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="flex items-center gap-3 shrink-0">
<a href="/" class="flex items-center gap-3">
<div class="w-9 h-9 bg-primary/15 rounded-xl flex items-center justify-center glow-sm brand-icon-wrap">
<img id="brand-logo" class="hidden rounded-lg object-contain" style="height:40px"/>
<div class="max-w-6xl mx-auto px-4 lg:px-8">
<!-- Row 1: Identity + Account -->
<div class="flex items-center justify-between py-3 gap-3">
<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>
</div>
<div>
<h1 class="text-sm font-bold text-primary leading-tight" id="brand-name">AfakZaid RAG</h1>
<p class="text-[10px] text-on-surface-variant/60 uppercase tracking-widest" id="brand-sub">Scholarly Intelligence</p>
<div class="min-w-0">
<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 truncate" id="brand-sub">Scholarly Intelligence</p>
</div>
</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}
</div>
<nav class="flex items-center gap-2 shrink-0">
<div id="nav-auth" class="flex items-center gap-2"></div>
</nav>
</div>
</header>`;