764 lines
35 KiB
TypeScript
764 lines
35 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import ThemeSwitcher from "@/components/partials/header/theme-switcher";
|
|
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import { generateLocalizedPath } from "@/utils/globals";
|
|
import { Link } from "@/i18n/routing";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
navigationMenuTriggerStyle,
|
|
} from "@/components/ui/navigation-menu";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "../ui/dropdown-menu";
|
|
import Image from "next/image";
|
|
import { Icon } from "../ui/icon";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import Cookies from "js-cookie";
|
|
import { getInfoProfile } from "@/service/auth";
|
|
|
|
type Detail = {
|
|
id: number;
|
|
userId: any;
|
|
firstName: string;
|
|
username: string;
|
|
fullname: string;
|
|
memberIdentity: any;
|
|
email: string;
|
|
address: string;
|
|
phoneNumber: any;
|
|
message: string;
|
|
};
|
|
|
|
const Navbar = () => {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const locale = params?.locale;
|
|
const [language, setLanguage] = useState<"id" | "en">("id");
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const fullname = getCookiesDecrypt("ufne");
|
|
const roleName = getCookiesDecrypt("urne");
|
|
const levelName = getCookiesDecrypt("ulnae");
|
|
const roleId = getCookiesDecrypt("urie");
|
|
const [detail, setDetail] = useState<Detail>();
|
|
|
|
const onLogout = () => {
|
|
Object.keys(Cookies.get()).forEach((cookieName) => {
|
|
Cookies.remove(cookieName);
|
|
});
|
|
|
|
router.push("/");
|
|
};
|
|
|
|
const handleLanguageChange = (lang: "id" | "en") => {
|
|
setLanguage(lang);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
const response = await getInfoProfile();
|
|
const details = response.data?.data;
|
|
|
|
setDetail(details);
|
|
console.log("data", details);
|
|
}
|
|
|
|
initState();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
|
|
<div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center">
|
|
<img
|
|
src="/assets/mediahub-logo.gif"
|
|
alt="Media Hub Logo"
|
|
className="w-fit h-20 md:h-24"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button
|
|
className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden"
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
>
|
|
{menuOpen ? (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="#000"
|
|
d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="#000"
|
|
d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden lg:flex items-center gap-5">
|
|
{/* Nav Menu */}
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger>
|
|
<a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
|
|
<svg
|
|
className="mx-2 dark:"
|
|
width="25"
|
|
height="24"
|
|
viewBox="0 0 25 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
Konten
|
|
</a>
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath("/video/filter", String(locale))
|
|
)
|
|
}
|
|
className="flex items-start gap-1.5 p-2 "
|
|
>
|
|
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiYoutube className="mr-2" />
|
|
Video
|
|
</p>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath("/audio/filter", String(locale))
|
|
)
|
|
}
|
|
className="flex place-items-start gap-1.5 p-2 "
|
|
>
|
|
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiMusic className="mr-2" />
|
|
Audio
|
|
</p>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath("/image/filter", String(locale))
|
|
)
|
|
}
|
|
className="flex place-items-start gap-1.5 p-2"
|
|
>
|
|
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiImage className="mr-2" />
|
|
Foto
|
|
</p>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath(
|
|
"/document/filter",
|
|
String(locale)
|
|
)
|
|
)
|
|
}
|
|
className="flex place-items-start gap-1.5 p-2"
|
|
>
|
|
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiFile className="mr-2" />
|
|
Teks
|
|
</p>
|
|
</NavigationMenuLink>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href="/schedule" legacyBehavior passHref>
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
|
<span>
|
|
<svg
|
|
className="mr-2"
|
|
width="25"
|
|
height="24"
|
|
viewBox="0 0 25 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
Jadwal
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href="/indeks" legacyBehavior passHref>
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
|
<span>
|
|
<svg
|
|
className="mr-2"
|
|
width="25"
|
|
height="24"
|
|
viewBox="0 0 25 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
Indeks
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
|
|
<Link href="#" className="flex items-center space-x-1 text-red-600">
|
|
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
|
|
<span className="font-medium">Live</span>
|
|
</Link>
|
|
<div className="flex items-center space-x-1 ">
|
|
<a href="https://tvradio.polri.go.id/">
|
|
<img
|
|
src="/assets/polriTv.png"
|
|
className="w-auto lg:max-w-screen-lg h-10 flex-auto "
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="relative inline-block text-left">
|
|
{/* Tombol Utama */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg"
|
|
>
|
|
<img
|
|
src={
|
|
language === "id"
|
|
? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
|
|
: "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
|
|
}
|
|
alt={language === "id" ? "Ind" : "Eng"}
|
|
className="w-3 h-3"
|
|
/>
|
|
<span>{language === "id" ? "Ind" : "Eng"}</span>
|
|
<span className="text-gray-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 32 32"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
{/* Dropdown Menu */}
|
|
{isOpen && (
|
|
<div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
|
|
<button
|
|
onClick={() => handleLanguageChange("id")}
|
|
className={`flex items-center space-x-2 w-full px-4 py-2 ${
|
|
language === "id" ? "font-medium" : ""
|
|
}`}
|
|
>
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
|
|
alt="Indonesia"
|
|
className="w-5 h-5"
|
|
/>
|
|
<span>Ind</span>
|
|
</button>
|
|
<button
|
|
onClick={() => handleLanguageChange("en")}
|
|
className={`flex items-center space-x-2 w-full px-4 py-2 ${
|
|
language === "en" ? "font-medium" : ""
|
|
}`}
|
|
>
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
|
|
alt="English"
|
|
className="w-5 h-5"
|
|
/>
|
|
<span>Eng</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<ThemeSwitcher />
|
|
<div className="relative text-gray-600 dark:text-white">
|
|
<input
|
|
type="text"
|
|
placeholder="Pencarian"
|
|
className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
|
|
/>
|
|
<span className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
fill-rule="evenodd"
|
|
d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
{roleId === "5" ||
|
|
roleId === "6" ||
|
|
roleId === "7" ||
|
|
roleId === "8" ? (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild className="cursor-pointer">
|
|
{detail !== undefined ? (
|
|
<div className="flex items-center gap-3 text-default-800">
|
|
<Image
|
|
src={"https://netidhub.com/assets/img/user-avatar.png"}
|
|
alt={"Image"}
|
|
width={36}
|
|
height={36}
|
|
className="rounded-full"
|
|
/>
|
|
<div>
|
|
<div className="text-sm font-medium capitalize lg:block hidden">
|
|
{detail?.fullname}
|
|
</div>
|
|
<p className="text-xs">({detail?.fullname})</p>
|
|
</div>
|
|
<span className="text-base me-2.5 lg:inline-block hidden">
|
|
<Icon icon="heroicons-outline:chevron-down"></Icon>
|
|
</span>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 p-0" align="end">
|
|
<DropdownMenuGroup>
|
|
{[
|
|
{
|
|
name: "Profile & Settings",
|
|
icon: "heroicons:user",
|
|
href: "/profile",
|
|
},
|
|
{
|
|
name: "Kelola Konten",
|
|
icon: "heroicons:megaphone",
|
|
href: "/dashboard",
|
|
},
|
|
].map((item, index) => (
|
|
<Link
|
|
href={item.href}
|
|
key={`info-menu-${index}`}
|
|
className="cursor-pointer"
|
|
>
|
|
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
|
|
<Icon icon={item.icon} className="w-4 h-4" />
|
|
{item.name}
|
|
</DropdownMenuItem>
|
|
</Link>
|
|
))}
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
|
|
<div>
|
|
<Link href={"/"}>
|
|
<button
|
|
type="submit"
|
|
className="w-full flex items-center gap-2"
|
|
onClick={onLogout}
|
|
>
|
|
<Icon icon="heroicons:power" className="w-4 h-4" />
|
|
Log out
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
) : roleId === "2" ||
|
|
roleId === "3" ||
|
|
roleId === "4" ||
|
|
roleId === "9" ||
|
|
roleId === "10" ||
|
|
roleId === "11" ||
|
|
roleId === "12" ||
|
|
roleId === "13" ? (
|
|
// Dropdown menu for roleId === 3
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild className="cursor-pointer">
|
|
{detail !== undefined ? (
|
|
<div className="flex items-center gap-3 text-default-800">
|
|
<Image
|
|
src={"https://netidhub.com/assets/img/user-avatar.png"}
|
|
alt={"Image"}
|
|
width={36}
|
|
height={36}
|
|
className="rounded-full"
|
|
/>
|
|
<div>
|
|
<div className="text-sm font-medium capitalize lg:block hidden">
|
|
{detail?.fullname}
|
|
</div>
|
|
<p className="text-xs">({detail?.fullname})</p>
|
|
</div>
|
|
<span className="text-base me-2.5 lg:inline-block hidden">
|
|
<Icon icon="heroicons-outline:chevron-down"></Icon>
|
|
</span>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 p-0" align="end">
|
|
<DropdownMenuGroup>
|
|
{[
|
|
{
|
|
name: "Profile & Settings",
|
|
icon: "heroicons:user",
|
|
href: "/profile",
|
|
},
|
|
{
|
|
name: "Dashboard",
|
|
icon: "heroicons:megaphone",
|
|
href: "/dashboard",
|
|
},
|
|
].map((item, index) => (
|
|
<Link
|
|
href={item.href}
|
|
key={`info-menu-${index}`}
|
|
className="cursor-pointer"
|
|
>
|
|
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
|
|
<Icon icon={item.icon} className="w-4 h-4" />
|
|
{item.name}
|
|
</DropdownMenuItem>
|
|
</Link>
|
|
))}
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
|
|
<div>
|
|
<Link href={"/"}>
|
|
<button
|
|
type="submit"
|
|
className="w-full flex items-center gap-2"
|
|
onClick={onLogout}
|
|
>
|
|
<Icon icon="heroicons:power" className="w-4 h-4" />
|
|
Log out
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
) : (
|
|
// Masuk and Daftar buttons for roleId === null
|
|
<div className="flex justify-center items-center mx-3 gap-5">
|
|
<Link
|
|
href="/auth"
|
|
className="w-full lg:w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
|
|
>
|
|
Masuk
|
|
</Link>
|
|
<Link
|
|
href="#"
|
|
className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"
|
|
>
|
|
Daftar
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{menuOpen && (
|
|
<div className="lg:hidden absolute bg-[#f7f7f7] px-4 py-3 w-full space-y-3 z-50">
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger>
|
|
<a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
|
|
<svg
|
|
className="mx-2 dark:"
|
|
width="25"
|
|
height="24"
|
|
viewBox="0 0 25 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
Konten
|
|
</a>
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath("/video/filter", String(locale))
|
|
)
|
|
}
|
|
className="flex items-start gap-1.5 p-2 hover:bg-white"
|
|
>
|
|
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiYoutube className="mr-2" />
|
|
Video
|
|
</p>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath("/audio/filter", String(locale))
|
|
)
|
|
}
|
|
className="flex place-items-start gap-1.5 p-2 hover:bg-white"
|
|
>
|
|
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiMusic className="mr-2" />
|
|
Audio
|
|
</p>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath("/image/filter", String(locale))
|
|
)
|
|
}
|
|
className="flex place-items-start gap-1.5 p-2 hover:bg-white"
|
|
>
|
|
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiImage className="mr-2" />
|
|
Foto
|
|
</p>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
onClick={() =>
|
|
router.push(
|
|
generateLocalizedPath(
|
|
"/document/filter",
|
|
String(locale)
|
|
)
|
|
)
|
|
}
|
|
className="flex place-items-start gap-1.5 p-2 hover:bg-white"
|
|
>
|
|
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
|
|
<FiFile className="mr-2" />
|
|
Teks
|
|
</p>
|
|
</NavigationMenuLink>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href="/schedule" legacyBehavior passHref>
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
|
<span>
|
|
<svg
|
|
className="mr-2"
|
|
width="25"
|
|
height="24"
|
|
viewBox="0 0 25 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
Jadwal
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href="/indeks" legacyBehavior passHref>
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
|
<span>
|
|
<svg
|
|
className="mr-2"
|
|
width="25"
|
|
height="24"
|
|
viewBox="0 0 25 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
Indeks
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
<div className="flex flex-row justify-between mx-3">
|
|
<div className="flex items-center space-x-1 mx-3 text-red-600">
|
|
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
|
|
<span className="font-medium">Live</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
|
|
<a href="https://tvradio.polri.go.id/">
|
|
<img
|
|
src="/assets/polriTv.png"
|
|
className="w-21 h-11 flex items-center"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div className="relative inline-block mx-3 text-left">
|
|
{/* Tombol Utama Bahasa */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg"
|
|
>
|
|
<img
|
|
src={
|
|
language === "id"
|
|
? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
|
|
: "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
|
|
}
|
|
alt={language === "id" ? "Ind" : "Eng"}
|
|
className="w-3 h-3"
|
|
/>
|
|
<span>{language === "id" ? "Ind" : "Eng"}</span>
|
|
<span className="text-gray-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 32 32"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
{/* Dropdown Menu */}
|
|
{isOpen && (
|
|
<div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
|
|
<button
|
|
onClick={() => handleLanguageChange("id")}
|
|
className={`flex items-center space-x-2 w-full px-4 py-2 ${
|
|
language === "id" ? "font-medium" : ""
|
|
}`}
|
|
>
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
|
|
alt="Indonesia"
|
|
className="w-5 h-5"
|
|
/>
|
|
<span>Ind</span>
|
|
</button>
|
|
<button
|
|
onClick={() => handleLanguageChange("en")}
|
|
className={`flex items-center space-x-2 w-full px-4 py-2 ${
|
|
language === "en" ? "font-medium" : ""
|
|
}`}
|
|
>
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
|
|
alt="English"
|
|
className="w-5 h-5"
|
|
/>
|
|
<span>Eng</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className=" py-1 flex items-center mx-3">
|
|
<input
|
|
type="text"
|
|
placeholder="Pencarian"
|
|
className="border rounded-full w-full text-sm text-center text-gray-600"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-center items-center mx-3 gap-5">
|
|
<Link
|
|
href="/auth"
|
|
className="w-full lg:w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
|
|
>
|
|
Masuk
|
|
</Link>
|
|
<Link
|
|
href="#"
|
|
className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"
|
|
>
|
|
Daftar
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|