116 lines
4.0 KiB
TypeScript
116 lines
4.0 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Menu, X, Phone } from "lucide-react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
|
|
const Navigation = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const handleContactClick = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
// If we're already on the home page, just scroll to contact section
|
|
if (location.pathname === '/') {
|
|
const contactSection = document.getElementById('contact');
|
|
if (contactSection) {
|
|
contactSection.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
} else {
|
|
// Navigate to home page and then scroll to contact section
|
|
navigate('/');
|
|
// Use setTimeout to ensure the page has loaded before scrolling
|
|
setTimeout(() => {
|
|
const contactSection = document.getElementById('contact');
|
|
if (contactSection) {
|
|
contactSection.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}, 100);
|
|
}
|
|
};
|
|
|
|
const navItems = [
|
|
{ name: "Home", href: "/" },
|
|
{ name: "What We Do", href: "/what-we-do" },
|
|
{ name: "Methods", href: "/methods" },
|
|
{ name: "Employee Notices", href: "/employee-notice" },
|
|
{ name: "Contact", href: "/#contact" },
|
|
];
|
|
|
|
return (
|
|
<nav className="fixed top-0 w-full z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<h1 className="text-2xl font-bold text-foreground">
|
|
NQS <span className="text-glow">Inspection</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:block">
|
|
<div className="ml-10 flex items-baseline space-x-8">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
onClick={item.name === 'Contact' ? handleContactClick : undefined}
|
|
className="text-muted-foreground hover:text-primary transition-colors duration-200 font-medium"
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden md:block">
|
|
<Button onClick={handleContactClick} className="btn-orange-glow">
|
|
<Phone className="w-4 h-4 mr-2" />
|
|
Emergency Support
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="md:hidden">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="text-foreground"
|
|
>
|
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isOpen && (
|
|
<div className="md:hidden">
|
|
<div className="px-2 pt-2 pb-3 space-y-1 border-t border-border bg-card">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="block px-3 py-2 text-muted-foreground hover:text-primary transition-colors duration-200"
|
|
onClick={item.name === 'Contact' ? (e) => { handleContactClick(e); setIsOpen(false); } : () => setIsOpen(false)}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
<div className="pt-2">
|
|
<Button onClick={(e) => { handleContactClick(e); setIsOpen(false); }} className="btn-orange-glow w-full">
|
|
<Phone className="w-4 h-4 mr-2" />
|
|
Emergency Support
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation; |