school_compare/nextjs-app/components/Navigation.tsx

/**
 * Navigation Component
 * Top header nav for desktop; bottom tab bar for mobile (≤640px).
 */

'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useComparison } from '@/hooks/useComparison';
import { LogoMark } from './Logo';
import styles from './Navigation.module.css';

type IconProps = { className?: string };

const SearchIcon = ({ className }: IconProps) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
);

const CompareIcon = ({ className }: IconProps) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 7h13l-3-3" />
    <path d="M20 17H7l3 3" />
  </svg>
);

const RankingsIcon = ({ className }: IconProps) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M7 21V11" />
    <path d="M12 21V4" />
    <path d="M17 21v-7" />
  </svg>
);

const AdmissionsIcon = ({ className }: IconProps) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="3" y="5" width="18" height="16" rx="2" />
    <path d="M3 10h18M8 3v4M16 3v4" />
  </svg>
);

export function Navigation() {
  const pathname = usePathname();
  const { selectedSchools } = useComparison();

  const isActive = (path: string) => {
    if (path === '/') return pathname === '/';
    return pathname.startsWith(path);
  };

  /**
   * iOS Chrome (and some Android browsers) auto-hide their URL bar on scroll,
   * which grows the visual viewport without changing the layout viewport.
   * `position: fixed; bottom: 0` sticks to the layout viewport, so our tab
   * bar appears to float mid-screen with a gap beneath it. Track the delta
   * via VisualViewport and apply it as a translate so the bar always sits
   * flush against the visible bottom edge.
   */
  useEffect(() => {
    const vv = window.visualViewport;
    if (!vv) return;
    const root = document.documentElement;
    const update = () => {
      const offset = window.innerHeight - (vv.height + vv.offsetTop);
      // Only positive offsets are meaningful (bar hidden → push down).
      root.style.setProperty('--mobile-bar-offset', `${Math.max(0, offset)}px`);
    };
    update();
    vv.addEventListener('resize', update);
    vv.addEventListener('scroll', update);
    return () => {
      vv.removeEventListener('resize', update);
      vv.removeEventListener('scroll', update);
      root.style.removeProperty('--mobile-bar-offset');
    };
  }, []);

  /*
   * The brand guideline's nav also carries Guides, About, Favourites and a
   * "Sign in" button. None of the four is added here, deliberately: there are
   * no Guides or About pages, and Favourites and Sign in both need an accounts
   * system that does not exist. Drawing chrome for features we do not have
   * would be a promise the product cannot keep. Rankings and Admissions —
   * which the guideline omits — take their place, because they are real.
   *
   * If accounts ever ship, this is the list to extend.
   */
  const items = [
    { href: '/', label: 'Search', Icon: SearchIcon },
    { href: '/compare', label: 'Compare', Icon: CompareIcon },
    { href: '/rankings', label: 'Rankings', Icon: RankingsIcon },
    { href: '/admissions', label: 'Admissions', Icon: AdmissionsIcon },
  ] as const;

  return (
    <>
      <header className={styles.header}>
        <div className={styles.container}>
          <Link href="/" className={styles.logo} aria-label="schoolcompare home">
            {/*
              LogoMark's defaults are already correct for this ground: the pin
              takes var(--brand) and the leaf is knocked out in var(--bg-card),
              which is exactly the header's own background in both themes. No
              explicit pin/leaf needed here — the footer, which sits on the
              sunken teal band, does have to pass them.
            */}
            <span className={styles.logoIcon}>
              <LogoMark />
            </span>
            <span className={styles.logoText}>
              school<span className={styles.logoTextAccent}>compare</span>
            </span>
          </Link>

          <nav className={styles.nav} aria-label="Main navigation">
            {items.map(({ href, label }) => {
              const active = isActive(href);
              const showBadge = href === '/compare' && selectedSchools.length > 0;
              return (
                <Link
                  key={href}
                  href={href}
                  className={active ? `${styles.navLink} ${styles.active}` : styles.navLink}
                  aria-current={active ? 'page' : undefined}
                >
                  {label}
                  {showBadge && (
                    <span key={selectedSchools.length} className={styles.badge}>
                      {selectedSchools.length}
                    </span>
                  )}
                </Link>
              );
            })}
          </nav>
        </div>
      </header>

      <nav className={styles.bottomBar} aria-label="Main navigation">
        {items.map(({ href, label, Icon }) => {
          const active = isActive(href);
          const showBadge = href === '/compare' && selectedSchools.length > 0;
          return (
            <Link
              key={href}
              href={href}
              className={active ? `${styles.tab} ${styles.tabActive}` : styles.tab}
              aria-current={active ? 'page' : undefined}
            >
              <span className={styles.tabIconWrap}>
                <Icon className={styles.tabIcon} />
                {showBadge && (
                  <span key={selectedSchools.length} className={styles.tabBadge} aria-label={`${selectedSchools.length} selected`}>
                    {selectedSchools.length}
                  </span>
                )}
              </span>
              <span className={styles.tabLabel}>{label}</span>
            </Link>
          );
        })}
      </nav>
    </>
  );
}