131 lines
3.9 KiB
JavaScript
131 lines
3.9 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
|
|
export default function Navigation() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 10);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
const scrollToSection = (sectionId) => {
|
|
const element = document.getElementById(sectionId);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
setIsMobileMenuOpen(false);
|
|
};
|
|
|
|
return (
|
|
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
isScrolled ? "bg-white shadow-lg" : "bg-transparent"
|
|
}`}>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center py-4">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<img
|
|
src="./logo.png"
|
|
alt="Wastpol Logo"
|
|
className={`h-12 transition-all duration-300 ${
|
|
isScrolled ? "filter-none" : "brightness-0 invert"
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
<button
|
|
onClick={() => scrollToSection("uslugi")}
|
|
className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
|
|
isScrolled ? "text-gray-700" : "text-white"
|
|
}`}
|
|
>
|
|
Usługi
|
|
</button>
|
|
<button
|
|
onClick={() => scrollToSection("onas")}
|
|
className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
|
|
isScrolled ? "text-gray-700" : "text-white"
|
|
}`}
|
|
>
|
|
O nas
|
|
</button>
|
|
<button
|
|
onClick={() => scrollToSection("kontakt")}
|
|
className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
|
|
isScrolled ? "text-gray-700" : "text-white"
|
|
}`}
|
|
>
|
|
Kontakt
|
|
</button>
|
|
<a
|
|
href="tel:18442022044"
|
|
className={`font-semibold px-4 py-2 rounded-md transition-all duration-300 ${
|
|
isScrolled
|
|
? "bg-blue-600 text-white hover:bg-blue-700"
|
|
: "bg-white text-blue-600 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
18 442 02 44
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="md:hidden">
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
className={`inline-flex items-center justify-center p-2 rounded-md transition-colors duration-300 ${
|
|
isScrolled ? "text-gray-700 hover:bg-gray-100" : "text-white hover:bg-white hover:bg-opacity-10"
|
|
}`}
|
|
>
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
{isMobileMenuOpen ? (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{isMobileMenuOpen && (
|
|
<div className="md:hidden bg-white shadow-lg rounded-lg mt-2 py-2">
|
|
<button
|
|
onClick={() => scrollToSection("uslugi")}
|
|
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
>
|
|
Usługi
|
|
</button>
|
|
<button
|
|
onClick={() => scrollToSection("onas")}
|
|
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
>
|
|
O nas
|
|
</button>
|
|
<button
|
|
onClick={() => scrollToSection("kontakt")}
|
|
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
>
|
|
Kontakt
|
|
</button>
|
|
<a
|
|
href="tel:18442022044"
|
|
className="block px-4 py-2 text-blue-600 font-semibold hover:bg-gray-100"
|
|
>
|
|
18 442 02 44
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|