|
|
|
|
@ -2,21 +2,21 @@ import { useEffect, useRef, useState } from "react";
|
|
|
|
|
import { Link, useLocation } from "react-router-dom"; |
|
|
|
|
|
|
|
|
|
const menuMap = { |
|
|
|
|
"/company": { label: "Company" }, |
|
|
|
|
"/uam": { label: "UAM / UATM" }, |
|
|
|
|
"/company": { label: "Company" }, |
|
|
|
|
"/uam": { label: "UAM / UATM" }, |
|
|
|
|
"/business": { label: "Business" }, |
|
|
|
|
"/solution": { label: "Solution" }, |
|
|
|
|
"/contact": { label: "Contact Us" }, |
|
|
|
|
"/contact": { label: "Contact Us" }, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default function SubHero({ title, desc, navItems, bgImage }) { |
|
|
|
|
const { pathname } = useLocation(); |
|
|
|
|
const topPath = "/" + pathname.split("/")[1]; |
|
|
|
|
const topPath = "/" + pathname.split("/")[1]; |
|
|
|
|
const topLabel = menuMap[topPath]?.label || ""; |
|
|
|
|
const curLabel = navItems?.find((n) => n.to === pathname)?.label || ""; |
|
|
|
|
|
|
|
|
|
const [dropOpen, setDropOpen] = useState(false); |
|
|
|
|
const [scrollY, setScrollY] = useState(0); |
|
|
|
|
const [scrollY, setScrollY] = useState(0); |
|
|
|
|
const dropRef = useRef(null); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
@ -33,9 +33,9 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
|
|
|
|
|
return () => document.removeEventListener("mousedown", handler); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
const parallaxY = scrollY * 0.45; |
|
|
|
|
const parallaxY = scrollY * 0.45; |
|
|
|
|
const fadeOpacity = Math.max(0, 1 - scrollY / 420); |
|
|
|
|
const titleLines = typeof title === "string" ? title.split("\n") : [title]; |
|
|
|
|
const titleLines = typeof title === "string" ? title.split("\n") : [title]; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
@ -55,27 +55,21 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
|
|
|
|
|
|
|
|
|
|
<div className="sh2-inner" style={{ opacity: fadeOpacity }}> |
|
|
|
|
<nav className="sh2-bc" aria-label="breadcrumb"> |
|
|
|
|
<Link to="/main" className="sh2-bc-item">Home</Link> |
|
|
|
|
<Link to="/main" className="sh2-bc-item"> |
|
|
|
|
Home |
|
|
|
|
</Link> |
|
|
|
|
<span className="sh2-bc-sep">—</span> |
|
|
|
|
<div className="sh2-bc-drop" ref={dropRef}> |
|
|
|
|
<button |
|
|
|
|
className="sh2-bc-btn" |
|
|
|
|
onClick={() => setDropOpen((v) => !v)} |
|
|
|
|
aria-expanded={dropOpen} |
|
|
|
|
> |
|
|
|
|
<button className="sh2-bc-btn" onClick={() => setDropOpen((v) => !v)} aria-expanded={dropOpen}> |
|
|
|
|
{topLabel} |
|
|
|
|
<svg className={`sh2-bc-arrow${dropOpen ? " sh2-bc-arrow--open" : ""}`} |
|
|
|
|
width="10" height="6" viewBox="0 0 10 6" fill="none"> |
|
|
|
|
<path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" |
|
|
|
|
strokeLinecap="round" strokeLinejoin="round"/> |
|
|
|
|
<svg className={`sh2-bc-arrow${dropOpen ? " sh2-bc-arrow--open" : ""}`} width="10" height="6" viewBox="0 0 10 6" fill="none"> |
|
|
|
|
<path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> |
|
|
|
|
</svg> |
|
|
|
|
</button> |
|
|
|
|
{dropOpen && ( |
|
|
|
|
<div className="sh2-bc-menu" role="listbox"> |
|
|
|
|
{navItems?.map((item) => ( |
|
|
|
|
<Link key={item.to} to={item.to} role="option" |
|
|
|
|
className={`sh2-bc-menu-item${item.to === pathname ? " sh2-bc-menu-item--cur" : ""}`} |
|
|
|
|
onClick={() => setDropOpen(false)}> |
|
|
|
|
<Link key={item.to} to={item.to} role="option" className={`sh2-bc-menu-item${item.to === pathname ? " sh2-bc-menu-item--cur" : ""}`} onClick={() => setDropOpen(false)}> |
|
|
|
|
{item.label} |
|
|
|
|
</Link> |
|
|
|
|
))} |
|
|
|
|
@ -108,8 +102,7 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
|
|
|
|
|
<nav className="sh2-nav" aria-label="Sub Navigation"> |
|
|
|
|
<div className="sh2-nav-inner"> |
|
|
|
|
{navItems.map((item) => ( |
|
|
|
|
<Link key={item.to} to={item.to} |
|
|
|
|
className={`sh2-nav-tab${pathname === item.to ? " sh2-nav-tab--active" : ""}`}> |
|
|
|
|
<Link key={item.to} to={item.to} className={`sh2-nav-tab${pathname === item.to ? " sh2-nav-tab--active" : ""}`}> |
|
|
|
|
{item.label} |
|
|
|
|
{pathname === item.to && <span className="sh2-nav-pip" />} |
|
|
|
|
</Link> |
|
|
|
|
|