84 lines
3.3 KiB
Cheetah
84 lines
3.3 KiB
Cheetah
{{ define "navbar" }}
|
|
<nav class="sticky top-0 w-full bg-[var(--primary-bg)] shadow-md z-50 transition-all duration-300">
|
|
<div id="navbar-inner" class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3 md:py-4 transition-all duration-300">
|
|
<!-- Logo -->
|
|
<a href="/" class="flex items-start transition-all duration-300" id="logo-container">
|
|
<img src="/static/GORAKLOGO.png" alt="Logo" class="h-12 md:h-16 transition-all duration-300" id="logo-img"/>
|
|
<span class="ml-2 text-[var(--accent)] font-bold text-xl md:text-2xl">Pagerino</span>
|
|
</a>
|
|
|
|
<!-- Nav Links -->
|
|
<ul class="hidden md:flex space-x-10 text-[var(--text-primary)] font-semibold">
|
|
<li>
|
|
<a href="/network"
|
|
class="px-4 py-2 rounded-lg hover:bg-[var(--accent)] hover:text-white transition-colors duration-200">
|
|
Network
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/map"
|
|
class="px-4 py-2 rounded-lg hover:bg-[var(--accent)] hover:text-white transition-colors duration-200">
|
|
Map
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/analytics"
|
|
class="px-4 py-2 rounded-lg hover:bg-[var(--accent)] hover:text-white transition-colors duration-200">
|
|
Analytics
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- User / Login -->
|
|
<div class="flex items-center space-x-4">
|
|
{{- if .user.Authorized -}}
|
|
<!-- Logged in -->
|
|
<button id="user-btn" class="hidden md:flex items-center space-x-2 text-[var(--text-primary)] hover:text-[var(--accent)] transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.2c-3.1 0-9.3 1.6-9.3 4.9v2.4h18.6v-2.4c0-3.3-6.2-4.9-9.3-4.9z"/>
|
|
</svg>
|
|
<span id="username-display">Account</span>
|
|
</button>
|
|
{{- else -}}
|
|
<!-- Logged out -->
|
|
<a id="login-btn" href="/login" class="text-[var(--accent)] font-semibold hover:text-[var(--accent-light)] transition-colors">Login</a>
|
|
{{- end -}}
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button class="md:hidden flex items-center text-[var(--text-primary)]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
// Navbar collapsing behaviour
|
|
const logoImg = document.getElementById('logo-img')
|
|
const navbarInner = document.getElementById('navbar-inner')
|
|
|
|
let ticking = false;
|
|
window.addEventListener('scroll', () => {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(() => {
|
|
if (window.scrollY > navbarInner.offsetHeight) {
|
|
logoImg.classList.add('h-8', 'md:h-10')
|
|
logoImg.classList.remove('h-12', 'md:h-16')
|
|
navbarInner.classList.add('py-2', 'md:py-3')
|
|
navbarInner.classList.remove('py-3', 'md:py-4')
|
|
} else {
|
|
logoImg.classList.remove('h-8', 'md:h-10')
|
|
logoImg.classList.add('h-12', 'md:h-16')
|
|
navbarInner.classList.remove('py-2', 'md:py-3')
|
|
navbarInner.classList.add('py-3', 'md:py-4')
|
|
}
|
|
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
</script>
|
|
{{ end }} |