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

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

type PublicHeaderProps = {
  loginHref?: string;
  signupHref?: string;
  showAuthActions?: boolean;
};

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(props: PublicHeaderProps) {
  const location = useLocation();
  const [scrolled, setScrolled] = createSignal(false);
  const [mobileOpen, setMobileOpen] = createSignal(false);

  const loginHref = () => props.loginHref || '/auth/login';
  const signupHref = () => props.signupHref || '/auth/register';
  const showAuthActions = () => props.showAuthActions !== 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: 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>

        <Show when={showAuthActions()}>
          <div class="desktop-only nav-actions">
            <A class="nav-auth-btn nav-auth-secondary" href={loginHref()}>Login</A>
            <A class="nav-auth-btn nav-auth-primary" href={signupHref()}>Sign Up</A>
          </div>
        </Show>

        <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="/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>
          <Show when={showAuthActions()}>
            <div class="mobile-nav-actions container">
              <A class="mobile-login" href={loginHref()} onClick={() => setMobileOpen(false)}>Login</A>
              <A class="mobile-signup" href={signupHref()} onClick={() => setMobileOpen(false)}>Sign Up</A>
            </div>
          </Show>
        </div>
      </Show>
    </header>
  );
}