54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function ModelNav() {
|
|
const [activeHash, setActiveHash] = useState('');
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const sections = ['fence-staining', 'deck-staining', 'structures', 'pre-staining', 'restoration', 'your-wood', 'quote-section'];
|
|
let current = '';
|
|
|
|
for (const section of sections) {
|
|
const el = document.getElementById(section);
|
|
if (el) {
|
|
const rect = el.getBoundingClientRect();
|
|
if (rect.top <= 120) {
|
|
current = section;
|
|
}
|
|
}
|
|
}
|
|
setActiveHash(current);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
handleScroll();
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const navItems = [
|
|
{ name: 'Fence Staining', href: '#fence-staining' },
|
|
{ name: 'Deck Staining', href: '#deck-staining' },
|
|
{ name: 'Pergolas & Structures', href: '#structures' },
|
|
{ name: 'Pre-Staining', href: '#pre-staining' },
|
|
{ name: 'Restoration', href: '#restoration' },
|
|
{ name: "Your wood's condition", href: '#your-wood' },
|
|
{ name: 'Get a quote', href: '#quote-section' },
|
|
];
|
|
|
|
return (
|
|
<div className="model-nav">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
className={`model-nav-item ${activeHash === item.href.substring(1) ? 'active' : ''}`}
|
|
href={item.href}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|