71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState, useEffect, useRef} from "react";
|
||
|
|
|
||
|
|
export default function Navbar() {
|
||
|
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleClickOutside = (event: MouseEvent) => {
|
||
|
|
if (
|
||
|
|
dropdownRef.current &&
|
||
|
|
!dropdownRef.current.contains(event.target as Node)
|
||
|
|
) {
|
||
|
|
setIsDropdownOpen(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleEscapeKey = (event: KeyboardEvent) => {
|
||
|
|
if (event.key === "Escape") {
|
||
|
|
setIsDropdownOpen(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
document.addEventListener("mousedown", handleClickOutside);
|
||
|
|
document.addEventListener("keydown", handleEscapeKey);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
||
|
|
document.removeEventListener("keydown", handleEscapeKey);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full flex h-14 border-b border-neutral-300 text-black">
|
||
|
|
<div className="my-2 w-20 flex border border-neutral-300 rounded-xl ml-2 mr-6">
|
||
|
|
<p className="m-auto text-sm">Logo</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex">
|
||
|
|
<button className="px-6">Earthquakes</button>
|
||
|
|
<button className="px-6">Observatories</button>
|
||
|
|
<button className="px-6">Warehouse</button>
|
||
|
|
<button className="px-6">Shop</button>
|
||
|
|
|
||
|
|
<div className="my-auto relative">
|
||
|
|
<button
|
||
|
|
className="px-6"
|
||
|
|
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||
|
|
>
|
||
|
|
About Us
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{isDropdownOpen && (
|
||
|
|
<div ref={dropdownRef} className="absolute top-full left-0 mt-4 w-40 bg-white border border-neutral-300 rounded-lg shadow-lg z-50">
|
||
|
|
<ul>
|
||
|
|
<li className="px-4 py-2 hover:bg-neutral-100 rounded-lg cursor-pointer">Our Mission</li>
|
||
|
|
<li className="px-4 py-2 hover:bg-neutral-100 cursor-pointer">The Team</li>
|
||
|
|
<li className="px-4 py-2 hover:bg-neutral-100 rounded-lg cursor-pointer">Contact Us</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex-grow"></div>
|
||
|
|
<div className="my-2 mr-2 w-10 flex border rounded-full">
|
||
|
|
<p className="m-auto text-sm">User</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|