267 lines
11 KiB
TypeScript
267 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import {
|
|
Menu,
|
|
Search,
|
|
Facebook,
|
|
Instagram,
|
|
Youtube,
|
|
Twitter,
|
|
X,
|
|
} from "lucide-react";
|
|
import { Button } from "../ui/button";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const navItems = [
|
|
{ label: "BERANDA", href: "/", active: true },
|
|
{ label: "BERITA TERKINI", href: "/category/latest-news" },
|
|
{ label: "BERITA POPULER", href: "/category/popular-news" },
|
|
{ label: "DAMAI INDONESIAKU", href: "/category/peace-indonesia" },
|
|
{ label: "JAGA NEGERI", href: "/category/protect" },
|
|
{ label: "BERITA OPINI", href: "/category/opinion-news" },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
const handleMenuClick = () => {
|
|
if (typeof window !== "undefined" && window.innerWidth < 768) {
|
|
setMobileMenuOpen(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<nav className="w-full bg-white z-50 relative">
|
|
<div className="w-full border-b border-gray-200">
|
|
<div className="max-w-[1350px] mx-auto">
|
|
<div className="flex justify-between items-center px-6 py-4 bg-white">
|
|
<div className="flex items-center space-x-2">
|
|
<Image src="/infokreasi.png" alt="Logo" width={98} height={98} />
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center gap-4">
|
|
<div className="flex space-x-6 text-black text-xl">
|
|
<div className="flex items-center gap-4 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="14"
|
|
height="14"
|
|
viewBox="0 0 14 14"
|
|
>
|
|
<g fill="none">
|
|
<g
|
|
// clip-path="url(#primeTwitter0)"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M11.025.656h2.147L8.482 6.03L14 13.344H9.68L6.294 8.909l-3.87 4.435H.275l5.016-5.75L0 .657h4.43L7.486 4.71zm-.755 11.4h1.19L3.78 1.877H2.504z"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="primeTwitter0">
|
|
<path fill="#fff" d="M0 0h14v14H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</g>
|
|
</svg>
|
|
</Link>
|
|
<Link href="#" aria-label="Instagram">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
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="#" aria-label="YouTube">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
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>
|
|
<Search
|
|
className="text-black hover:opacity-80 cursor-pointer"
|
|
size={16}
|
|
/>
|
|
<Button className="bg-[#2481D3] text-white px-4 py-2 rounded hover:bg-blue-700">
|
|
Subscribe Us!
|
|
</Button>
|
|
<Link href={"/auth"}>
|
|
<Button className="bg-black text-white rounded-md px-5 py-2 hover:bg-yellow-500">
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#247ED1]">
|
|
<div className="max-w-[1350px] mx-auto px-6 py-3 flex justify-between items-center text-white">
|
|
<div className="hidden md:flex gap-6 text-sm font-semibold">
|
|
<div className="flex gap-5">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.label}
|
|
href={item.href}
|
|
className={cn(
|
|
"transition-colors",
|
|
isActive ? "text-white" : "text-black"
|
|
)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="block">
|
|
<Menu
|
|
className="text-white cursor-pointer"
|
|
onClick={handleMenuClick}
|
|
/>
|
|
</div>
|
|
<div className="md:hidden" />{" "}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isMobileMenuOpen && (
|
|
<div className="fixed top-0 left-0 w-full h-[450px] overflow-y-auto bg-white z-50 flex flex-col p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<Image src="/infokreasi.png" alt="Logo" width={80} height={80} />
|
|
<X
|
|
className="text-black w-6 h-6 cursor-pointer"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
/>
|
|
</div>
|
|
|
|
<nav className="flex flex-col gap-4 text-base font-semibold">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.label}
|
|
href={item.href}
|
|
className={cn(
|
|
"transition-colors",
|
|
isActive ? "text-blue-500" : "text-black"
|
|
)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="flex gap-4 mt-8">
|
|
<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="14"
|
|
height="14"
|
|
viewBox="0 0 14 14"
|
|
>
|
|
<g fill="none">
|
|
<g
|
|
// clip-path="url(#primeTwitter0)"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M11.025.656h2.147L8.482 6.03L14 13.344H9.68L6.294 8.909l-3.87 4.435H.275l5.016-5.75L0 .657h4.43L7.486 4.71zm-.755 11.4h1.19L3.78 1.877H2.504z"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="primeTwitter0">
|
|
<path fill="#fff" d="M0 0h14v14H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</g>
|
|
</svg>
|
|
</Link>
|
|
<Link href="#" aria-label="Instagram">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
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="#" aria-label="YouTube">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
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>
|
|
|
|
<Button className="bg-[#2481D3] text-white mt-6 w-full">
|
|
Subscribe Us!
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|