181 lines
6.9 KiB
XML
181 lines
6.9 KiB
XML
"use client";
|
|
import { Search } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
const isActive = (href: any) => {
|
|
return pathname === href || pathname.startsWith(href + "/");
|
|
};
|
|
|
|
return (
|
|
<div className="w-full bg-white py-4 border-b">
|
|
<div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
|
|
{/* Left: Logo */}
|
|
<div className="flex flex-row justify-between mb-3">
|
|
<div className="flex items-center">
|
|
<Image
|
|
src="/isukini-logo.jpg"
|
|
alt="Kritik Tajam Logo"
|
|
width={140}
|
|
height={100}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-6">
|
|
{/* Social Icons */}
|
|
<div className="hidden md:flex items-center gap-5 text-black text-xl">
|
|
<Link href="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
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="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
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="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
|
|
<Link href="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Middle Menu */}
|
|
<div className="flex flex-row justify-between">
|
|
<nav className="hidden md:flex items-center gap-10 text-sm font-semibold">
|
|
<Link
|
|
href="/"
|
|
className={
|
|
isActive("/")
|
|
? "text-orange-500 underline"
|
|
: "text-black hover:text-orange-500"
|
|
}
|
|
>
|
|
Beranda
|
|
</Link>
|
|
|
|
<Link
|
|
href="/category/latest-news"
|
|
className={
|
|
isActive("/category/latest-news")
|
|
? "text-orange-500 underline"
|
|
: "text-black hover:text-orange-500"
|
|
}
|
|
>
|
|
Berita Terkini
|
|
</Link>
|
|
|
|
<Link
|
|
href="/category/popular-news"
|
|
className={
|
|
isActive("/category/popular-news")
|
|
? "text-orange-500 underline"
|
|
: "text-black hover:text-orange-500"
|
|
}
|
|
>
|
|
Berita Populer
|
|
</Link>
|
|
|
|
<Link
|
|
href="/category/protect"
|
|
className={
|
|
isActive("/category/protect")
|
|
? "text-orange-500 underline"
|
|
: "text-black hover:text-orange-500"
|
|
}
|
|
>
|
|
Jaga Negeri
|
|
</Link>
|
|
|
|
<Link
|
|
href="/category/opinion-news"
|
|
className={
|
|
isActive("/category/opinion-news")
|
|
? "text-orange-500 underline"
|
|
: "text-black hover:text-orange-500"
|
|
}
|
|
>
|
|
Berita Opini
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
// onClick={() => document.documentElement.classList.toggle("dark")}
|
|
className="w-10 h-5 rounded-full bg-gray-300 dark:bg-gray-700 relative transition-all"
|
|
>
|
|
<div className="w-5 h-5 bg-white dark:bg-black rounded-full shadow absolute top-0 left-0 dark:left-5 transition-all"></div>
|
|
</button>
|
|
|
|
{/* BURGER BUTTON (mobile menu) */}
|
|
<button className="md:hidden p-2 rounded-lg border">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={2}
|
|
stroke="currentColor"
|
|
className="w-6 h-6"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button className="p-2 border rounded-full">
|
|
<Search size={15} />
|
|
</button>
|
|
<Link href={"/auth"}>
|
|
<button className="bg-orange-600 text-white px-5 py-2 rounded-full text-sm font-semibold">
|
|
LOGIN
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|