tiny/app/templates/header.html at 496bc630bbf909388a63ffcf7bda4580bbd96557 · recursivezero/tiny · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<header class="app-header">
  <div class="header-left">
    <div class="app-logo">🔗</div>
    <span class="app-name">RZRO.link</span>
  </div>
  <nav class="header-nav">
    <a href="/" class="nav-link active">Home</a>
    <a href="/coming-soon" class="nav-link">Analysis</a>
    <a href="/coming-soon" class="nav-link">Search</a>
    <a href="/coming-soon" class="nav-link">Contact</a>
    <a href="/history" class="nav-link" title="Show recent shortened URLs">History</a>
  </nav>
  <div class="header-right">
    <button class="theme-toggle" onclick="toggleTheme()">🌓</button>
    <button class="hamburger">☰</button>
  </div>
</header>
<script>
  const links = document.querySelectorAll(".nav-link");
  const currentPath = window.location.pathname;

  links.forEach(link => {
    if (link.getAttribute("href") === currentPath) {
      link.classList.add("active");
    } else {
      link.classList.remove("active");
    }
  });

  const hamburger = document.querySelector(".hamburger");
  const nav = document.querySelector(".header-nav");

  hamburger.addEventListener("click", () => {
    nav.classList.toggle("open");
  });

</script>