130 lines
3.6 KiB
JavaScript
130 lines
3.6 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function Navbar() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
// Deteksi scroll
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (window.scrollY > 50) {
|
|
setScrolled(true);
|
|
} else {
|
|
setScrolled(false);
|
|
}
|
|
};
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`fixed w-full top-0 z-20 transition-all duration-300 ${
|
|
scrolled ? "bg-white shadow-md" : "bg-transparent"
|
|
}`}
|
|
>
|
|
<nav className="max-w-7xl mx-auto flex items-center justify-between px-6 lg:px-12 py-4 relative">
|
|
{/* Logo */}
|
|
<div className="flex items-center space-x-2">
|
|
<img src="/WTell.png" alt="logo" className="h-8" />
|
|
<span
|
|
className={`text-lg font-bold transition-colors duration-300 ${
|
|
scrolled ? "text-black" : "text-white"
|
|
}`}
|
|
>
|
|
WALANJA
|
|
</span>
|
|
</div>
|
|
|
|
{/* Menu */}
|
|
<ul
|
|
className={`flex items-center space-x-8 font-medium transition-colors duration-300 ${
|
|
scrolled ? "text-black" : "text-white"
|
|
}`}
|
|
>
|
|
{/* Home */}
|
|
<li>
|
|
<Link
|
|
to="/"
|
|
className={`hover:text-yellow-400 ${
|
|
!scrolled ? "border-b-2 border-yellow-400 pb-1" : ""
|
|
}`}
|
|
>
|
|
Home
|
|
</Link>
|
|
</li>
|
|
|
|
{/* Dropdown Portofolio */}
|
|
<li className="relative">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="hover:text-yellow-400 flex items-center gap-1"
|
|
>
|
|
Portofolio
|
|
<ChevronDown
|
|
size={18}
|
|
className={`transition-transform duration-200 ${
|
|
isOpen ? "rotate-180" : ""
|
|
}`}
|
|
/>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<ul className="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg text-black">
|
|
<li>
|
|
<Link
|
|
to="/sdm"
|
|
className="block px-4 py-2 hover:bg-yellow-100"
|
|
>
|
|
SDM
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/alat-kerja"
|
|
className="block px-4 py-2 hover:bg-yellow-100"
|
|
>
|
|
Alat Kerja
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/produksi"
|
|
className="block px-4 py-2 hover:bg-yellow-100"
|
|
>
|
|
Produksi
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/pengalaman"
|
|
className="block px-4 py-2 hover:bg-yellow-100"
|
|
>
|
|
Pengalaman
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
)}
|
|
</li>
|
|
|
|
{/* About Us */}
|
|
<li>
|
|
<Link to="/about" className="hover:text-yellow-400">
|
|
About Us
|
|
</Link>
|
|
</li>
|
|
|
|
{/* Contact Us */}
|
|
<li>
|
|
<Link to="/contact" className="hover:text-yellow-400">
|
|
Contact Us
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|