spb/vrai-prix

1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2/**3 * Navigation d'en-tête. Le menu mobile utilise le motif checkbox + peer-checked :4 * il s'ouvre et se ferme en PUR CSS — fonctionne même sans JavaScript (cache5 * périmé, hydratation cassée, JS bloqué). Le JS n'est qu'une amélioration6 * (fermeture au changement de page, verrou de défilement).7 */8"use client";9import { useEffect, useRef } from "react";10import Link from "next/link";11import { usePathname } from "next/navigation";12import { useLang } from "./LangContext";13import GroupeKaBadge from "../ka/GroupeKaBadge";1415export default function HeaderNav() {16  const { lang, setLang } = useLang();17  const path = usePathname();18  const fr = lang === "fr";19  const box = useRef<HTMLInputElement>(null);2021  // améliorations JS (facultatives) : fermer à la navigation, verrouiller le scroll22  useEffect(() => {23    if (box.current) box.current.checked = false;24    document.body.style.overflow = "";25  }, [path]);26  const onToggle = () => {27    document.body.style.overflow = box.current?.checked ? "hidden" : "";28  };2930  const items = [31    { href: "/", label: fr ? "Estimer" : "Estimate" },32    { href: "/carte", label: fr ? "Carte" : "Map" },33    { href: "/ka", label: fr ? "Ka · agent IA" : "Ka · AI agent" },34    { href: "/parc", label: fr ? "Parc immobilier" : "Portfolio" },35    { href: "/stats", label: fr ? "Statistiques" : "Statistics" },36    { href: "/methodologie", label: fr ? "Méthodologie" : "Methodology" },37  ];38  const isActive = (href: string) =>39    href === "/" ? path === "/" : path.startsWith(href);4041  return (42    <>43      {/* nav pilule — desktop */}44      <nav className="hidden items-center gap-1 lg:flex">45        {items.map((it) => (46          <Link47            key={it.href}48            href={it.href}49            className={`vp-display inline-flex min-h-[38px] items-center rounded-full border-[1.5px] px-3.5 py-1.5 text-[13.5px] font-bold transition-all ${50              isActive(it.href)51                ? "border-ink bg-ink text-lime"52                : "border-transparent text-ink-2 hover:border-ink hover:text-ink"53            }`}54          >55            {it.label}56          </Link>57        ))}58      </nav>5960      {/* ---- menu mobile : checkbox cachée + peer-checked, zéro JS requis ---- */}61      <div className="lg:hidden">62        <input63          ref={box}64          type="checkbox"65          id="vp-menu"66          className="peer sr-only"67          onChange={onToggle}68          aria-label="Menu"69        />70        {/* hamburger (label = bouton) */}71        <label72          htmlFor="vp-menu"73          aria-hidden="true"74          className="flex h-11 w-11 cursor-pointer flex-col items-center justify-center gap-[5px] rounded-full border-[1.5px] border-ink bg-surface active:bg-lime-soft"75        >76          <span className="h-[2px] w-[18px] bg-ink" />77          <span className="h-[2px] w-[18px] bg-ink" />78          <span className="h-[2px] w-[18px] bg-ink" />79        </label>8081        {/* panneau plein écran — sibling du checkbox, affiché via peer-checked */}82        <div83          className="fixed inset-0 z-[var(--z-modal,900)] hidden flex-col overflow-y-auto peer-checked:flex"84          style={{ background: "var(--paper)" }}85          role="dialog"86          aria-modal="true"87          aria-label="Menu"88        >89          {/* barre du haut : marque + fermer */}90          <div91            className="flex h-16 shrink-0 items-center justify-between border-b-2 border-ink px-4"92            style={{ background: "var(--paper)" }}93          >94            <Link95              href="/"96              className="vp-display flex items-center text-[22px] font-bold leading-none tracking-[-0.04em]"97            >98              Vrai99              <span className="ml-1 rotate-[-2deg] rounded-md bg-ink px-[7px] pb-1 pt-[2px] text-lime">100                Prix101              </span>102            </Link>103            <label104              htmlFor="vp-menu"105              aria-label={fr ? "Fermer le menu" : "Close menu"}106              className="vp-display flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border-[1.5px] border-ink bg-ink text-[17px] font-bold text-lime"107            >108              ✕109            </label>110          </div>111112          {/* liens géants */}113          <nav className="flex flex-1 flex-col justify-center px-6 py-8">114            {items.map((it, i) => (115              <Link116                key={it.href}117                href={it.href}118                className="group flex items-baseline gap-4 border-b-[1.5px] border-dashed border-[rgba(20,24,20,0.18)] py-5 last:border-0"119              >120                <span className="vp-mono text-[12px] font-bold text-green">121                  0{i + 1}122                </span>123                <span124                  className={`vp-display text-[29px] font-bold uppercase leading-none tracking-[-0.03em] ${125                    isActive(it.href)126                      ? "rounded-md bg-ink px-2.5 py-1 text-lime"127                      : "text-ink group-active:text-green-deep"128                  }`}129                >130                  {it.label}131                </span>132              </Link>133            ))}134          </nav>135136          {/* pied du menu */}137          <div className="shrink-0 border-t-2 border-ink px-6 pb-[max(20px,env(safe-area-inset-bottom))] pt-4">138            {/* entrée « Un service Groupe KA » du menu mobile */}139            <div className="mb-3">140              <GroupeKaBadge />141            </div>142            <button143              onClick={() => setLang(fr ? "en" : "fr")}144              className="vp-mono mb-3 rounded-full border-[1.5px] border-ink bg-surface px-4 py-2 text-[12px] font-bold uppercase tracking-[0.08em]"145            >146              {fr ? "English version" : "Version française"}147            </button>148            <div className="vp-mono flex flex-wrap gap-x-5 gap-y-1.5 text-[10.5px] uppercase tracking-[0.06em] text-ink-3">149              <Link href="/conditions">{fr ? "Conditions" : "Terms"}</Link>150              <Link href="/confidentialite">151                {fr ? "Confidentialité" : "Privacy"}152              </Link>153              <Link href="/contact">Contact</Link>154            </div>155          </div>156        </div>157      </div>158    </>159  );160}161