116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
export default function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
const [navOpen, setNavOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const lock = open || navOpen;
|
|
document.body.style.overflow = lock ? 'hidden' : '';
|
|
return () => { document.body.style.overflow = ''; };
|
|
}, [open, navOpen]);
|
|
|
|
const closeAll = () => { setOpen(false); setNavOpen(false); };
|
|
|
|
return (
|
|
<>
|
|
<header className="ux-header">
|
|
<div className="container">
|
|
<div className="ux-navbar">
|
|
|
|
<Link href="/" className="ux-brand" onClick={closeAll}>
|
|
<Image
|
|
src="/assets/images/footerlogo.png"
|
|
alt="Logo"
|
|
width={120}
|
|
height={40}
|
|
priority
|
|
/>
|
|
</Link>
|
|
|
|
<ul className={`ux-nav ${navOpen ? 'is-open' : ''}`}>
|
|
<li><Link href="/work" onClick={closeAll}>Work</Link></li>
|
|
<li><Link href="/services" onClick={closeAll}>Services</Link></li>
|
|
<li><Link href="/about" onClick={closeAll}>About</Link></li>
|
|
<li><Link href="/process" onClick={closeAll}>Process</Link></li>
|
|
|
|
<li className="ux-nav-cta">
|
|
<Link href="/start_project" onClick={closeAll}>Start a Project</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="ux-header-actions">
|
|
<button
|
|
type="button"
|
|
className={`ux-hamburger ${navOpen ? 'is-active' : ''}`}
|
|
aria-label="Toggle navigation"
|
|
aria-expanded={navOpen}
|
|
onClick={() => { setNavOpen(!navOpen); setOpen(false); }}
|
|
>
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className={`ux-menu ${open ? 'active' : ''}`}
|
|
aria-label="Toggle contact panel"
|
|
aria-expanded={open}
|
|
onClick={() => { setOpen(!open); setNavOpen(false); }}
|
|
>
|
|
<Image
|
|
className="icon open-icon"
|
|
src="/assets/images/menutoggle.svg"
|
|
alt=""
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
<Image
|
|
className="icon close-icon"
|
|
src="/assets/images/closetoggle.svg"
|
|
alt=""
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div
|
|
className={`ux-overlay ${(open || navOpen) ? 'active' : ''}`}
|
|
onClick={closeAll}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<div className={`contact-panel ${open ? 'active' : ''}`}>
|
|
<h4>
|
|
<Image src="/assets/images/hello.svg" alt="hello" width={24} height={24} />
|
|
Say hello!
|
|
</h4>
|
|
|
|
<div className="images">
|
|
<Image src="/assets/images/popup1.png" alt="" width={80} height={80} />
|
|
<Image src="/assets/images/popup2.png" alt="" width={80} height={80} />
|
|
<Image src="/assets/images/popup3.png" alt="" width={80} height={80} />
|
|
</div>
|
|
|
|
<p>
|
|
<Image src="/assets/images/location.svg" alt="location" width={18} height={18} />
|
|
<span>410 Sandtown, California 94001, USA</span>
|
|
</p>
|
|
|
|
<p>
|
|
<Image src="/assets/images/email.svg" alt="email" width={18} height={18} />
|
|
<span> info@example.com</span>
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|