Attempt 1

2025-09-11 22:26:30 +02:00
parent e100836ecb
commit 3ea7308af0
182 changed files with 25449 additions and 0 deletions
--- a/WebApp/src/layouts/components/navbar.tmpl
+++ b/WebApp/src/layouts/components/navbar.tmpl
@@ -0,0 +1,69 @@
+{{ define "navbar" }}
+<nav class="fixed 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-center transition-all duration-300" id="logo-container">
+      <img src="/static/logo.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">MyApp</span>
+    </a>
+
+    <!-- Nav Links -->
+    <ul class="hidden md:flex space-x-6 text-[var(--text-primary)] font-medium">
+      <li><a href="/network" class="hover:text-[var(--accent)] transition-colors">Network</a></li>
+      <li><a href="/map" class="hover:text-[var(--accent)] transition-colors">Map</a></li>
+      <li><a href="/analytics" class="hover:text-[var(--accent)] transition-colors">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 }}