nxtgauge-frontend-solid/src/components/PublicHeader.tsx

import { A, useLocation } from '@solidjs/router';
import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js';

const isRouteActive = (pathname: string, href: string) => {
  if (href === '/') return pathname === '/';
  if (href === '/help-center') return pathname === '/help-center' || pathname.startsWith('/help-center/');
  return pathname === href;
};

export default function PublicHeader() {
  const location = useLocation();
  const [scrolled, setScrolled] = createSignal(false);
  const [mobileOpen, setMobileOpen] = createSignal(false);

  onMount(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    onCleanup(() => window.removeEventListener('scroll', onScroll));
  });

  createEffect(() => {
    location.pathname;
    setMobileOpen(false);
  });

  return (
    <header class={`public-header ${scrolled() ? 'public-header-scrolled' : ''}`}>
      <nav class="container nav-row">
        <A href="/" aria-label="Nxtgauge home">
          <img class="brand-logo" src="/nxtgauge-logo.png" alt="NXTGAUGE" />
        </A>

        <div class="desktop-only nav-links">
          <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/') }} href="/">Home</A>
          <A class="nav-underline" classList={{ active: location.pathname === '/professionals' || location.pathname.startsWith('/professionals/') }} href="/professionals">Professionals</A>
          <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/about') }} href="/about">About Us</A>
          <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/help-center') }} href="/help-center">Help Center</A>
          <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/contact') }} href="/contact">Contact Us</A>
        </div>

        <div class="desktop-only nav-actions">
          <A class="nav-auth-btn nav-auth-secondary" href="/login">Login</A>
        </div>

        <button
          type="button"
          class="mobile-menu-toggle"
          aria-label={mobileOpen() ? 'Close navigation menu' : 'Open navigation menu'}
          aria-expanded={mobileOpen()}
          aria-controls="public-mobile-nav"
          onClick={() => setMobileOpen(!mobileOpen())}
        >
          <span class="sr-only">Menu</span>
          <span class="mobile-bars">
            <span />
            <span />
            <span />
          </span>
        </button>
      </nav>

      <Show when={mobileOpen()}>
        <div id="public-mobile-nav" class="mobile-nav">
          <div class="mobile-nav-links container">
            <A href="/" onClick={() => setMobileOpen(false)}>Home</A>
            <A href="/professionals" onClick={() => setMobileOpen(false)}>Professionals</A>
            <A href="/about" onClick={() => setMobileOpen(false)}>About Us</A>
            <A href="/help-center" onClick={() => setMobileOpen(false)}>Help Center</A>
            <A href="/contact" onClick={() => setMobileOpen(false)}>Contact Us</A>
            <div class="mobile-nav-actions">
              <A class="mobile-login" href="/login" onClick={() => setMobileOpen(false)}>Login</A>
            </div>
          </div>
        </div>
      </Show>
    </header>
  );
}