2025-07-02 15:44:00 +00:00
|
|
|
"use client";
|
|
|
|
|
import { useState } from "react";
|
|
|
|
|
import Link from "next/link";
|
|
|
|
|
import { Menu, Lock, Search } from "lucide-react";
|
2025-07-03 08:09:16 +00:00
|
|
|
import { usePathname } from "next/navigation";
|
2025-07-02 15:44:00 +00:00
|
|
|
|
|
|
|
|
const Navbar = () => {
|
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
|
const toggleMenu = () => setIsOpen(!isOpen);
|
|
|
|
|
|
2025-07-03 08:09:16 +00:00
|
|
|
const pathname = usePathname();
|
|
|
|
|
|
|
|
|
|
const navLinks = [
|
|
|
|
|
{ href: "/", label: "BERANDA" },
|
|
|
|
|
{ href: "/category/development", label: "PEMBANGUNAN" },
|
|
|
|
|
{ href: "/category/health", label: "KESEHATAN" },
|
|
|
|
|
{ href: "/category/citizen-news", label: "BERITA WARGA" },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const isActive = (href: string) => {
|
|
|
|
|
if (href === "/") {
|
|
|
|
|
return pathname === "/";
|
|
|
|
|
}
|
|
|
|
|
return pathname.startsWith(href);
|
|
|
|
|
};
|
|
|
|
|
|
2025-07-02 15:44:00 +00:00
|
|
|
return (
|
|
|
|
|
<nav className="w-full bg-white shadow-md">
|
|
|
|
|
<div className="max-w-7xl mx-auto py-2 px-0 md:px-4 flex flex-col md:flex-row justify-end items-start md:justify-between md:items-center gap-4 bg-[#308A2E]">
|
|
|
|
|
<div className="flex items-center gap-4 w-full md:w-auto mx-3 md:mx-5">
|
|
|
|
|
<div className="flex gap-3 text-xs mx-3 text-white">
|
2025-07-03 08:09:16 +00:00
|
|
|
<Link href="/about" className="hover:text-yellow-400 ">
|
2025-07-02 15:44:00 +00:00
|
|
|
About
|
|
|
|
|
</Link>
|
2025-07-03 08:09:16 +00:00
|
|
|
<Link href="/advertise" className="hover:text-yellow-400">
|
2025-07-02 15:44:00 +00:00
|
|
|
Advertise
|
|
|
|
|
</Link>
|
2025-07-03 08:09:16 +00:00
|
|
|
<Link href="/privacy" className="hover:text-yellow-400">
|
2025-07-02 15:44:00 +00:00
|
|
|
Privacy & Policy
|
|
|
|
|
</Link>
|
2025-07-03 08:09:16 +00:00
|
|
|
<Link href="/contact" className="hover:text-yellow-400">
|
2025-07-02 15:44:00 +00:00
|
|
|
Contact
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex items-center gap-5 text-sm whitespace-nowrap text-white mx-5">
|
|
|
|
|
<div className="hidden md:block min-w-fit whitespace-nowrap text-white text-xs">
|
2025-07-03 08:09:16 +00:00
|
|
|
{new Date().toLocaleDateString("id-ID", {
|
|
|
|
|
weekday: "long",
|
|
|
|
|
year: "numeric",
|
|
|
|
|
month: "long",
|
|
|
|
|
day: "numeric",
|
|
|
|
|
})}
|
2025-07-02 15:44:00 +00:00
|
|
|
</div>
|
|
|
|
|
<div className="flex gap-3 text-white text-lg">
|
|
|
|
|
<Link href="#" aria-label="Facebook">
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="15"
|
|
|
|
|
height="15"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</Link>
|
|
|
|
|
<Link href="#" aria-label="Twitter">
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="15"
|
|
|
|
|
height="15"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</Link>
|
|
|
|
|
<Link href="#" aria-label="Google" className="text-[#F5F5F5]">
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="15"
|
|
|
|
|
height="15"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
// fill-rule="evenodd"
|
|
|
|
|
d="M7.796 14.333v-2.618h7.211c.066.382.12.763.12 1.265c0 4.364-2.923 7.462-7.33 7.462A7.63 7.63 0 0 1 .16 12.806a7.63 7.63 0 0 1 7.636-7.637c2.062 0 3.786.753 5.117 1.997L10.84 9.162c-.567-.546-1.56-1.178-3.044-1.178c-2.607 0-4.734 2.16-4.734 4.822s2.127 4.821 4.734 4.821c3.022 0 4.157-2.17 4.331-3.294zm13.27-2.6H23.2v2.134h-2.133V16h-2.134v-2.133H16.8v-2.134h2.133V9.6h2.134z"
|
|
|
|
|
// clip-rule="evenodd"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</Link>
|
|
|
|
|
<Link href="#" aria-label="Pinterest">
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="15"
|
|
|
|
|
height="15"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<defs>
|
|
|
|
|
<path
|
|
|
|
|
id="akarIconsPinterestFill0"
|
|
|
|
|
fill="#fff"
|
|
|
|
|
d="M0 0h24v24H0z"
|
|
|
|
|
/>
|
|
|
|
|
</defs>
|
|
|
|
|
<g fill="none">
|
|
|
|
|
<g
|
|
|
|
|
// clip-path="url(#akarIconsPinterestFill1)"
|
|
|
|
|
>
|
|
|
|
|
<g
|
|
|
|
|
// clip-path="url(#akarIconsPinterestFill2)"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M0 12c0 5.123 3.211 9.497 7.73 11.218c-.11-.937-.227-2.482.025-3.566c.217-.932 1.401-5.938 1.401-5.938s-.357-.715-.357-1.774c0-1.66.962-2.9 2.161-2.9c1.02 0 1.512.765 1.512 1.682c0 1.025-.653 2.557-.99 3.978c-.281 1.189.597 2.159 1.769 2.159c2.123 0 3.756-2.239 3.756-5.471c0-2.861-2.056-4.86-4.991-4.86c-3.398 0-5.393 2.549-5.393 5.184c0 1.027.395 2.127.889 2.726a.36.36 0 0 1 .083.343c-.091.378-.293 1.189-.332 1.355c-.053.218-.173.265-.4.159c-1.492-.694-2.424-2.875-2.424-4.627c0-3.769 2.737-7.229 7.892-7.229c4.144 0 7.365 2.953 7.365 6.899c0 4.117-2.595 7.431-6.199 7.431c-1.211 0-2.348-.63-2.738-1.373c0 0-.599 2.282-.744 2.84c-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0S0 5.373 0 12"
|
|
|
|
|
/>
|
|
|
|
|
</g>
|
|
|
|
|
</g>
|
|
|
|
|
<defs>
|
|
|
|
|
<clipPath id="akarIconsPinterestFill1">
|
|
|
|
|
<use href="#akarIconsPinterestFill0" />
|
|
|
|
|
</clipPath>
|
|
|
|
|
<clipPath id="akarIconsPinterestFill2">
|
|
|
|
|
<use href="#akarIconsPinterestFill0" />
|
|
|
|
|
</clipPath>
|
|
|
|
|
</defs>
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Link href="#" aria-label="Vk">
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="15"
|
|
|
|
|
height="15"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
// fill-rule="evenodd"
|
|
|
|
|
d="M23.45 5.948c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73c0 0-1.335 3.196-3.226 5.272c-.612.602-.89.793-1.224.793c-.167 0-.418-.191-.418-.738V5.948c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593c0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984c-.89 0-3.055-3.211-4.34-6.885C4.45 5.288 4.198 5 3.527 5H.9c-.75 0-.9.347-.9.73c0 .682.89 4.07 4.145 8.551C6.315 17.341 9.37 19 12.153 19c1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884c.39 0 1.057.192 2.615 1.667C19.11 18.216 19.403 19 20.405 19h2.625c.75 0 1.126-.368.91-1.096c-.238-.724-1.088-1.775-2.215-3.022c-.612-.71-1.53-1.475-1.809-1.858c-.389-.491-.278-.71 0-1.147c0 0 3.2-4.426 3.533-5.929"
|
|
|
|
|
// clip-rule="evenodd"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</Link>
|
|
|
|
|
<Link href="#" aria-label="Wifi">
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="15"
|
|
|
|
|
height="15"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M12 21q-1.05 0-1.775-.725T9.5 18.5t.725-1.775T12 16t1.775.725t.725 1.775t-.725 1.775T12 21m-5.65-5.65l-2.1-2.15q1.475-1.475 3.463-2.337T12 10t4.288.875t3.462 2.375l-2.1 2.1q-1.1-1.1-2.55-1.725T12 13t-3.1.625t-2.55 1.725M2.1 11.1L0 9q2.3-2.35 5.375-3.675T12 4t6.625 1.325T24 9l-2.1 2.1q-1.925-1.925-4.462-3.012T12 7T6.563 8.088T2.1 11.1"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Link
|
|
|
|
|
href="/auth"
|
|
|
|
|
className="hover:underline flex items-center gap-1"
|
|
|
|
|
>
|
|
|
|
|
<Lock className="w-3 h-3" />
|
|
|
|
|
Login
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="bg-[#31942E] text-white">
|
|
|
|
|
<div className="flex items-start justify-start md:justify-center md:items-center px-4 py-3 md:px-8 md:py-4">
|
|
|
|
|
{/* Toggle Menu (Mobile Only) */}
|
|
|
|
|
<button
|
|
|
|
|
className="md:hidden flex items-center"
|
|
|
|
|
onClick={toggleMenu}
|
|
|
|
|
aria-label="Toggle menu"
|
|
|
|
|
>
|
|
|
|
|
<Menu className="h-6 w-6 text-white" />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{/* Navigation Links (Desktop Only) */}
|
|
|
|
|
<div className="hidden md:flex items-center md:gap-x-32 font-semibold text-sm">
|
2025-07-03 08:09:16 +00:00
|
|
|
{navLinks.map((link, idx) => (
|
|
|
|
|
<Link
|
|
|
|
|
key={idx}
|
|
|
|
|
href={link.href}
|
|
|
|
|
className={`pl-4 pr-4 ${
|
|
|
|
|
isActive(link.href)
|
|
|
|
|
? "text-yellow-400"
|
|
|
|
|
: "hover:text-yellow-400 text-white"
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{link.label}
|
|
|
|
|
</Link>
|
|
|
|
|
))}
|
2025-07-02 15:44:00 +00:00
|
|
|
<Search className="w-5 h-5 hover:text-yellow-400 cursor-pointer ml-4" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{isOpen && (
|
|
|
|
|
<div className="md:hidden px-4 pb-4 flex flex-col gap-2 font-semibold text-sm bg-[#31942E]">
|
2025-07-03 08:09:16 +00:00
|
|
|
{navLinks.map((link, idx) => (
|
|
|
|
|
<Link
|
|
|
|
|
key={idx}
|
|
|
|
|
href={link.href}
|
|
|
|
|
className={`${
|
|
|
|
|
isActive(link.href)
|
|
|
|
|
? "text-yellow-400"
|
|
|
|
|
: "hover:text-yellow-400 text-white"
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{link.label}
|
|
|
|
|
</Link>
|
|
|
|
|
))}
|
2025-07-02 15:44:00 +00:00
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Navbar;
|
