b68748da14
Replace the full-width inline menu with a compact right-aligned dropdown that floats over page content. Adds click-outside-to-close via an invisible backdrop, and uses z-50 to sit above timeline sticky headings. - Replace database icon with squares (2x2 grid) for Data link - Remove 5 unused icon macros: star, pen, login, sparkles, clipboard - Add hover highlight (bg-surface-alt) to dropdown items
73 lines
4.7 KiB
HTML
73 lines
4.7 KiB
HTML
{% import "partials/icons.html" as icons %}
|
|
<nav class="relative border-b pb-4 text-sm" data-signals:_nav-open="false">
|
|
<div class="flex items-center justify-between">
|
|
<div class="font-semibold uppercase tracking-[0.25em] text-accent"><a href="/">B{rew}log</a></div>
|
|
<div class="relative flex items-center gap-1">
|
|
<a class="rounded-md p-1.5 transition {% if nav_active == "home" %}text-accent{% else %}text-text-muted hover:text-text-secondary{% endif %}" href="/" title="Home" aria-label="Home">
|
|
{% call icons::home("h-5 w-5") %}
|
|
</a>
|
|
<button type="button" class="rounded-md p-1.5 text-text-muted transition hover:text-text-secondary" title="Toggle theme" aria-label="Toggle theme" onclick="toggleTheme()">
|
|
<span class="theme-icon-light">{% call icons::sun("h-5 w-5") %}</span>
|
|
<span class="theme-icon-dark hidden">{% call icons::moon("h-5 w-5") %}</span>
|
|
</button>
|
|
<button class="rounded-md p-1.5 text-text-muted transition hover:text-text-secondary" data-on:click="$_navOpen = !$_navOpen" title="Menu" aria-label="Toggle menu">
|
|
<span data-show="!$_navOpen">{% call icons::hamburger("h-5 w-5") %}</span>
|
|
<span data-show="$_navOpen" style="display:none">{% call icons::close("h-5 w-5") %}</span>
|
|
</button>
|
|
<!-- Backdrop (click outside to close) -->
|
|
<div class="fixed inset-0 z-40" data-show="$_navOpen" data-on:click="$_navOpen = false" style="display:none"></div>
|
|
<!-- Dropdown menu -->
|
|
<div class="absolute right-0 top-full z-50 mt-2 flex flex-col gap-1 rounded-lg border bg-surface p-3 whitespace-nowrap" data-show="$_navOpen" style="display:none">
|
|
<a class="rounded-md px-4 py-2.5 transition flex items-center justify-end gap-4 {% if nav_active == "data" %}text-accent font-medium{% else %}text-text-muted hover:text-text hover:bg-surface-alt{% endif %}" href="/data">
|
|
Data {% call icons::squares("h-4 w-4 shrink-0") %}
|
|
</a>
|
|
<a class="rounded-md px-4 py-2.5 transition flex items-center justify-end gap-4 {% if nav_active == "timeline" %}text-accent font-medium{% else %}text-text-muted hover:text-text hover:bg-surface-alt{% endif %}" href="/timeline">
|
|
Timeline {% call icons::timeline("h-4 w-4 shrink-0") %}
|
|
</a>
|
|
{% if is_authenticated %}
|
|
<a class="rounded-md px-4 py-2.5 transition flex items-center justify-end gap-4 {% if nav_active == "checkin" %}text-accent font-medium{% else %}text-text-muted hover:text-text hover:bg-surface-alt{% endif %}" href="/check-in">
|
|
Check In {% call icons::checkin("h-4 w-4 shrink-0") %}
|
|
</a>
|
|
<a class="rounded-md px-4 py-2.5 transition flex items-center justify-end gap-4 {% if nav_active == "account" %}text-accent font-medium{% else %}text-text-muted hover:text-text hover:bg-surface-alt{% endif %}" href="/account">
|
|
Admin {% call icons::cog("h-4 w-4 shrink-0") %}
|
|
</a>
|
|
<form method="post" action="/logout">
|
|
<button type="submit" class="w-full rounded-md px-4 py-2.5 transition flex items-center justify-end gap-4 text-text-muted hover:text-text hover:bg-surface-alt">
|
|
Sign Out {% call icons::logout("h-4 w-4 shrink-0") %}
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<a class="rounded-md px-4 py-2.5 transition flex items-center justify-end gap-4 text-text-muted hover:text-text hover:bg-surface-alt" href="/login">
|
|
Login {% call icons::user("h-4 w-4 shrink-0") %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
const toggleTheme = () => {
|
|
const html = document.documentElement;
|
|
const isDark = html.getAttribute("data-theme") === "dark";
|
|
if (isDark) {
|
|
html.removeAttribute("data-theme");
|
|
localStorage.setItem("theme", "light");
|
|
} else {
|
|
html.setAttribute("data-theme", "dark");
|
|
localStorage.setItem("theme", "dark");
|
|
}
|
|
updateThemeIcons();
|
|
};
|
|
|
|
const updateThemeIcons = () => {
|
|
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
|
document.querySelectorAll(".theme-icon-light").forEach((el) => {
|
|
el.classList.toggle("hidden", isDark);
|
|
});
|
|
document.querySelectorAll(".theme-icon-dark").forEach((el) => {
|
|
el.classList.toggle("hidden", !isDark);
|
|
});
|
|
};
|
|
|
|
// Set correct icon state on load
|
|
updateThemeIcons();
|
|
</script>
|