openwaters.io/website/src/components/layout/Header.astro at 36beda19198103a751ad24358fbb167ddb5afab7 · openwatersio/openwaters.io · 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
const navItems = [
  { name: "About", href: "/about" },
  { name: "Tides", href: "/tides" },
  { name: "Bathymetry", href: "/bathymetry" },
  { name: "API", href: "/api" },
];

const currentPath = Astro.url.pathname;
---

<header id="site-header">
  <nav>
    <div class="flex items-center justify-between">
      <!-- Logo -->
      <a
        href="/"
        class="flex items-center gap-2 text-2xl font-bold transition-colors"
        style="color: var(--text);"
      >
        <svg
          class="h-8 w-8"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
            fill="currentColor"
            class="text-ocean-600"></path>
          <path
            d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
            fill="currentColor"
            class="text-ocean-400"></path>
        </svg>
        <span>Open Waters</span>
      </a>

      <!-- Desktop Navigation -->
      <ul class="mr-4 hidden items-center gap-8 md:flex">
        {
          navItems.map((item) => (
            <li>
              <a
                href={item.href}
                class={`font-medium transition-colors ${
                  currentPath.startsWith(item.href)
                    ? ""
                    : "hover:text-(--accent)"
                }`}
                style={
                  currentPath.startsWith(item.href)
                    ? `color: var(--accent)`
                    : `color: var(--text-secondary)`
                }
              >
                {item.name}
              </a>
            </li>
          ))
        }
      </ul>

      <!-- Mobile Menu Button -->
      <button
        id="mobile-menu-button"
        class="rounded p-2 hover:text-(--accent) focus:ring-2 focus:outline-hidden md:hidden"
        style="color: var(--text-secondary);"
        aria-label="Toggle menu"
        aria-expanded="false"
      >
        <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"></path>
        </svg>
      </button>
    </div>

    <!-- Mobile Navigation -->
    <div id="mobile-menu" class="mt-4 hidden pb-4 md:hidden">
      <ul class="space-y-2">
        {
          navItems.map((item) => (
            <li>
              <a
                href={item.href}
                class={`block rounded-lg px-4 py-2 font-medium transition-colors ${
                  currentPath.startsWith(item.href)
                    ? "bg-(--accent-bg) text-(--accent)"
                    : "text-(--text-secondary) hover:bg-(--surface-subtle)"
                }`}
              >
                {item.name}
              </a>
            </li>
          ))
        }
      </ul>
    </div>
  </nav>
</header>

<script>
  // Mobile menu toggle
  const button = document.getElementById("mobile-menu-button");
  const menu = document.getElementById("mobile-menu");

  button?.addEventListener("click", () => {
    const isExpanded = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", (!isExpanded).toString());
    menu?.classList.toggle("hidden");
  });

  // Scroll effect for header
  const header = document.getElementById("site-header");

  function updateHeaderOnScroll() {
    if (!header) return;
    const scrollTop = window.scrollY || document.documentElement.scrollTop;

    const classes = ["scrolled"];

    scrollTop > 0
      ? header.classList.add(...classes)
      : header.classList.remove(...classes);
  }

  // Initial check
  updateHeaderOnScroll();

  // Listen to scroll events
  window.addEventListener("scroll", updateHeaderOnScroll, { passive: true });
</script>