Andreas Wrede
45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
<div class="nav">
|
|
<button class="nav-hamburger" id="nav-hamburger-btn" aria-label="Menu" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<div class="nav-links" id="nav-links">
|
|
<a href="/live"{% if active_page == "live" %} class="active"{% endif %}>Live Dashboard</a>
|
|
<a href="/plugins"{% if active_page == "plugins" %} class="active"{% endif %}>Plugin Metrics</a>
|
|
<a href="/alerts"{% if active_page == "alerts" %} class="active"{% endif %}>Alerts</a>
|
|
{% if current_user and current_user.admin %}
|
|
<a href="/settings"{% if active_page == "settings" %} class="active"{% endif %}>Settings</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="nav-clock" title="Click for full-screen clock">
|
|
<canvas id="swiss-clock" width="44" height="44"></canvas>
|
|
</div>
|
|
{% if current_user %}
|
|
<a href="/profile" class="nav-user{% if active_page == 'profile' %} active{% endif %}" title="{{ current_user.full_name or current_user.username }}">
|
|
{% if current_user.avatar %}
|
|
<img class="nav-avatar" src="{{ current_user.avatar_url }}" alt="{{ current_user.full_name or current_user.username }}">
|
|
{% else %}
|
|
<span class="nav-initials">{{ (current_user.full_name or current_user.username)[:1] | upper }}</span>
|
|
{% endif %}
|
|
<span class="nav-username">{{ current_user.full_name or current_user.username }}</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Full-page clock overlay (click anywhere to dismiss) -->
|
|
<div id="clock-overlay">
|
|
<canvas id="swiss-clock-overlay" width="400" height="400"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var btn = document.getElementById('nav-hamburger-btn');
|
|
var links = document.getElementById('nav-links');
|
|
if (btn && links) {
|
|
btn.addEventListener('click', function() {
|
|
var open = links.classList.toggle('nav-open');
|
|
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
});
|
|
}
|
|
})();
|
|
</script>
|