// Top nav + footer — strict monochrome, brand-typography. // Main nav order: Products, Services, Sectors, Regions, Company, Partners, Sponsors // "More" overflow: Contact, Careers, Sustainability const MAIN_NAV = [ ["product", "Products"], ["builder", "Build a Tower"], ["services", "Services"], ["sector", "Sectors"], ["about", "Company"], ["partners", "Partners"], ["sponsors", "Our Sponsorships"], ]; const MORE_NAV = [ ["contact", "Contact"], ["careers", "Careers"], ["sustainability", "Sustainability"], ]; /* * Mega-menu config builder. * Returns the dropdown spec for each nav id, or null if no dropdown * (in which case the link just navigates directly). * * Each spec: { * headerLabel, headerTarget, headerSubtitle, * items: [ { code, name, body, page, params?, muted? } ] * } * - `page` is the page id to navigate to when row is clicked * - `params` is the optional second arg passed to onNavigate (e.g. productId) */ function getMegaMenuConfig(id) { const data = window.SOLO_DATA || {}; switch (id) { case "product": return { headerLabel: "All products", headerSubtitle: "The platform", headerTarget: "product", items: (data.products || []).map(p => ({ code: p.callsign, name: p.name, body: p.tagline, page: "product-detail", params: p.id, muted: p.isLegacy, comingSoon: p.comingSoon, })), }; case "services": return { headerLabel: "All services", headerSubtitle: "More than hardware", headerTarget: "services", items: [ { name: "Contract Manufacturing", body: "OEM and ODM options for security product design.", page: "service-detail", params: { serviceId: "contract-manufacturing" } }, { name: "Product Design", body: "You think it, we design it. Full turnkey design service.", page: "service-detail", params: { serviceId: "product-design" } }, { name: "Data Services (SIMs)", body: "Data and SIM services at source — multi-carrier, private APN, managed.", page: "service-detail", params: { serviceId: "data-services" } }, { name: "Network & Infrastructure", body: "All devices, one secure network. Private, mesh, P2P, Starlink, WAN.", page: "service-detail", params: { serviceId: "network-infrastructure" } }, { name: "Asset Management", body: "All devices, one location. Integrations into Ajax, Victron, CRM.", page: "service-detail", params: { serviceId: "asset-management" } }, { name: "Transport & Logistics", body: "You order, we deliver. Own UK + EU transport operation.", page: "service-detail", params: { serviceId: "transport-logistics" } }, ], }; case "sector": return { headerLabel: "All sectors", headerSubtitle: "Where Solo works", headerTarget: "sector", items: (data.sectors || []).map(s => ({ code: s.code, name: s.name, body: s.summary, page: "sector", params: s.id, })), }; case "regions": return { headerLabel: "All regions", headerSubtitle: "Where we operate", headerTarget: "regions", items: [ { code: "F-01", name: "United Kingdom", body: "Bedfordshire · HQ + Factory", page: "regions" }, { code: "F-02", name: "Poland", body: "Wrocław · Factory", page: "regions" }, { code: "F-03", name: "North America", body: "Wellington, Florida · Factory", page: "regions" }, { code: "P-04", name: "European Union", body: "Partner network", page: "regions" }, { code: "P-05", name: "North America", body: "Partner network", page: "regions" }, ], }; case "partners": return { headerLabel: "Partner programme", headerSubtitle: "The partner channel", headerTarget: "partners", // Featured item — rendered with extra emphasis at the top of the panel. // Exclusive Regions is the headline because UK + EU operate under a // single-customer exclusivity arrangement that distinguishes Solo from // standard distribution programmes. featuredItem: { name: "Exclusive Regions — UK · EU · Switzerland", body: "Solo's UK and European regions are held under single-customer regional exclusivity — a programme distinct from the open partner tiers.", page: "exclusive-regions", }, // Two-column grouped layout — see MegaMenu rendering branch. groups: [ { label: "North American Partners", items: [ { name: "Gold Partners", body: "Authorised Solo partners across North America.", page: "gold-partners" }, { name: "Platinum Partners", body: "Top-tier Solo partners across the North American region.", page: "platinum-partners" }, ], }, { label: "Regional coverage", items: [ { name: "All partner regions", body: "UK, EU and North America — including Solo facilities and partner depots.", page: "regions" }, ], }, ], // Footer call-to-action inside the panel footerItem: { name: "Become a partner", body: "Apply to the Solo partner programme.", page: "contact" }, }; case "sponsors": return { headerLabel: "All sponsorships", headerSubtitle: "Who we back", headerTarget: "sponsors", items: [ { code: "S-01", name: "Archie Davies", body: "GB4 Championship driver · Scorpio Motorsport. Backed by Solo since 2024.", page: "sponsor-archie" }, { code: "S-02", name: "Tommy Lovejoy", body: "8-year-old British karting driver · 2026 Wera Tools British Kart Championship.", page: "sponsor-tommy" }, ], }; case "about": return { headerLabel: "Company overview", headerSubtitle: "About Solo", headerTarget: "about", items: [ { code: "01", name: "Our Story", body: "Solo from 2019 to today — built in Britain, exported worldwide.", page: "our-story" }, { code: "02", name: "Meet The Team", body: "The team running Solo — engineering, commercial, operations.", page: "leadership" }, { code: "03", name: "Manufacturing", body: "Bedfordshire, Wrocław and Wellington — three factories, one operating standard.", page: "manufacturing" }, { code: "04", name: "Press & Media", body: "Press releases, media kit, brand assets and recent coverage.", page: "press" }, { code: "05", name: "Investors", body: "Information for current and prospective Solo investors.", page: "investors" }, { code: "06", name: "ESG & Compliance", body: "Modern Slavery, Anti-bribery, environmental and governance statements.", page: "esg" }, ], }; default: return null; } } // Page IDs that should mark a main-nav item as active when the user is on // a sub-route (e.g. product-detail belongs under the Products nav item). const NAV_ID_ALIASES = { product: ["product-detail"], about: ["our-story", "leadership", "manufacturing", "press", "investors", "esg"], // Regions sits under Partners because the regions ARE partner-agreement // territories (with UK + EU specifically under single-customer exclusivity). partners: ["exclusive-regions", "gold-partners", "platinum-partners", "regions"], sponsors: ["sponsor-archie", "sponsor-tommy"], }; function TopNav({ page, onNavigate }) { // Mobile menu state — full-screen slide-in for phones/tablets const [mobileOpen, setMobileOpen] = useState(false); // Close mobile menu whenever navigation happens const wrapNav = (target, arg) => { setMobileOpen(false); onNavigate(target, arg); }; // Lock body scroll while mobile menu is open useEffect(() => { if (mobileOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; }, [mobileOpen]); // Single "currently-open" identifier — only one dropdown at a time. const [openId, setOpenId] = useState(null); const navRootRef = useRef(null); // Tiny close delay lets the cursor cross the gap between trigger and panel const closeTimerRef = useRef(null); // Outside-click close — closes any dropdown if click falls outside the nav root useEffect(() => { if (!openId) return; const handler = (e) => { if (navRootRef.current && !navRootRef.current.contains(e.target)) setOpenId(null); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [openId]); const open = (id) => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current); setOpenId(id); }; const scheduleClose = () => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current); closeTimerRef.current = setTimeout(() => setOpenId(null), 140); }; const toggle = (id) => setOpenId((cur) => (cur === id ? null : id)); // Whether a given main-nav id should be marked as the active page const isActive = (id) => { if (page === id) return true; const aliases = NAV_ID_ALIASES[id]; if (aliases && aliases.includes(page)) return true; return false; }; // Highlight "More" when current page is one of its children const moreActive = MORE_NAV.some(([id]) => id === page); return ( <>
onNavigate("home")} style={{ cursor: "pointer" }}>
{/* Primary CTA group. Support ticket raising now lives inside the reseller portal only (see reseller-portal-dashboard.jsx) — no public entry point here any more. className used by responsive CSS to hide on mobile. */}
{/* Far-right utility slot — reseller login. Separated by a thin vertical divider so it reads as a secondary utility action, not part of the primary CTA group. className used by responsive CSS to hide on mobile. */}
{/* ───────── Mobile hamburger ───────── Only visible below 900px. Toggles the full-screen mobile menu. Uses a class name so the responsive CSS in index.html can show/hide it without React re-rendering on every viewport change. */}
{/* ───────── Mobile menu drawer ───────── Rendered OUTSIDE the
element. Two reasons: 1. The header has `backdrop-filter: blur(...)` which creates a new containing block for `position: fixed` descendants — a fixed child would size against the 72px header, not the viewport. Sibling placement avoids that trap. 2. A global CSS rule `header nav { display: none }` at <900px hides the desktop nav; the drawer contains its own