48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export default function Navbar() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggleMenu = () => setIsOpen(!isOpen);
|
|
|
|
return (
|
|
<nav className={isOpen ? "nav-active" : ""}>
|
|
<Link href="/" className="nav-logo">
|
|
<img src="/assets/vg-fence.png" alt="VG Fence Products" style={{ height: '40px', width: 'auto' }} />
|
|
</Link>
|
|
|
|
{/* Hamburger Menu Toggle */}
|
|
<button className="menu-toggle" onClick={toggleMenu} aria-label="Toggle Menu">
|
|
<div className={isOpen ? "hamburger active" : "hamburger"}>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</button>
|
|
|
|
<ul className={isOpen ? "nav-links active" : "nav-links"}>
|
|
<li><Link href="/" onClick={() => setIsOpen(false)}>Home</Link></li>
|
|
<li><Link href="/about" onClick={() => setIsOpen(false)}>About</Link></li>
|
|
<li><Link href="/products" onClick={() => setIsOpen(false)}>Products</Link></li>
|
|
<li><Link href="/manufacturing" onClick={() => setIsOpen(false)}>Manufacturing</Link></li>
|
|
<li><Link href="/rentals" onClick={() => setIsOpen(false)}>Rentals</Link></li>
|
|
<li><Link href="/blog" onClick={() => setIsOpen(false)}>Blog</Link></li>
|
|
<li><Link href="/contact" onClick={() => setIsOpen(false)}>Contact</Link></li>
|
|
<li className="mobile-cta-li">
|
|
<Link href="/login" className="nav-cta" onClick={() => setIsOpen(false)} style={{ width: '100%', justifyContent: 'center' }}>
|
|
Login
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
<Link href="/login" className="nav-cta desktop-cta">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
Login
|
|
</Link>
|
|
</nav>
|
|
);
|
|
}
|