487 lines
16 KiB
TypeScript
487 lines
16 KiB
TypeScript
"use client";
|
|
import { siteConfig } from "@/config/site";
|
|
import { Input } from "@nextui-org/input";
|
|
import {
|
|
Navbar,
|
|
NavbarContent,
|
|
NavbarItem,
|
|
NavbarMenu,
|
|
NavbarMenuItem,
|
|
NavbarMenuToggle,
|
|
} from "@nextui-org/navbar";
|
|
import {
|
|
Button,
|
|
Dropdown,
|
|
DropdownItem,
|
|
DropdownMenu,
|
|
DropdownTrigger,
|
|
} from "@nextui-org/react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
ChevronUpIcon,
|
|
FbIcon,
|
|
IdnIcon,
|
|
IgIcon,
|
|
SearchIcon,
|
|
TtIcon,
|
|
TwIcon,
|
|
YtIcon,
|
|
} from "../../icons";
|
|
import { ThemeSwitch } from "../../theme-switch";
|
|
import Cookies from "js-cookie";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface MenuItem {
|
|
key: string;
|
|
label: string;
|
|
href: URL;
|
|
submenu?: SubMenuItem[];
|
|
}
|
|
|
|
interface SubMenuItem {
|
|
label: string;
|
|
href: string;
|
|
}
|
|
|
|
interface DropdownOpenState {
|
|
[key: string]: boolean;
|
|
}
|
|
|
|
export default function NavbarHumas() {
|
|
const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
|
|
const router = useRouter();
|
|
|
|
const token = Cookies.get("access_token");
|
|
const isAuthenticated = Cookies.get("is_authenticated");
|
|
|
|
// useEffect(() => {
|
|
// if (!isAuthenticated) {
|
|
// onLogout();
|
|
// }
|
|
// }, [token]);
|
|
|
|
const onLogout = () => {
|
|
Object.keys(Cookies.get()).forEach((cookieName) => {
|
|
Cookies.remove(cookieName);
|
|
});
|
|
router.push("/auth");
|
|
};
|
|
|
|
const toggleDropdown = (key: any) => {
|
|
setDropdownOpen({
|
|
...dropdownOpen,
|
|
[key]: !dropdownOpen[key],
|
|
});
|
|
};
|
|
|
|
const searchInput = (
|
|
<Input
|
|
aria-label="Search"
|
|
classNames={{
|
|
inputWrapper: "bg-default-100",
|
|
input: "text-sm",
|
|
}}
|
|
labelPlacement="outside"
|
|
placeholder="Search..."
|
|
startContent={
|
|
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
|
}
|
|
type="search"
|
|
/>
|
|
);
|
|
return (
|
|
<Navbar
|
|
isBordered
|
|
maxWidth="full"
|
|
height="8rem"
|
|
className="dark:bg-[#1F1A17]"
|
|
>
|
|
<div className="w-full h-full flex">
|
|
<div className="min-w-max md:w-1/12 flex items-center justify-center">
|
|
<Link href={"/"}>
|
|
<Image
|
|
height={100}
|
|
width={100}
|
|
src="/logohumas.png"
|
|
alt="logo"
|
|
className="min-w-max"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="w-auto md:w-11/12 hidden md:flex flex-col justify-cente pt-3 space-y-3">
|
|
<div className="flex items-center justify-end gap-1 md:gap-5">
|
|
<div className="flex gap-1 lg:gap-3 items-center">
|
|
<Link
|
|
href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
|
|
target="_blank"
|
|
>
|
|
<FbIcon />
|
|
</Link>
|
|
<Link
|
|
href="https://www.instagram.com/divisihumaspolri/"
|
|
target="_blank"
|
|
>
|
|
<IgIcon />
|
|
</Link>
|
|
<Link
|
|
href="https://www.youtube.com/user/pidhumaspolri"
|
|
target="_blank"
|
|
>
|
|
<YtIcon />
|
|
</Link>
|
|
<Link href="https://twitter.com/DivHumas_Polri" target="_blank">
|
|
<TwIcon />
|
|
</Link>
|
|
<Link
|
|
href="https://www.tiktok.com/@divhumas_polri"
|
|
target="_blank"
|
|
>
|
|
<TtIcon />
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<IdnIcon />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-around ">
|
|
<Link href={"/"}>
|
|
<div>Beranda</div>
|
|
</Link>
|
|
<div>
|
|
<Dropdown className=" dark:bg-[#1F1A17]">
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
Tentang
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
// aria-label="tentang"
|
|
title="Tentang"
|
|
className="pt-4"
|
|
classNames={{
|
|
// base: "flex",
|
|
// list: "border-2 gap-2 flex flex-row flex-wrap"
|
|
list: "gap-2 flex flex-row flex-wrap",
|
|
}}
|
|
itemClasses={{
|
|
// base: "border border-red-700 w-[350px]"
|
|
base: "w-[350px]",
|
|
}}
|
|
>
|
|
<DropdownItem>
|
|
<Link
|
|
href="/tentang-humas-polri"
|
|
className="flex justify-between"
|
|
>
|
|
Tentang Humas POLRI
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="/static/profile-kapolri"
|
|
className="flex justify-between"
|
|
>
|
|
Profile Pimpinan POLRI
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="/static/struktur-mabes"
|
|
className="flex justify-between"
|
|
>
|
|
Struktur Organisasi
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="/static/visi-misi-polri"
|
|
className="flex justify-between"
|
|
>
|
|
Visi & Misi
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="/static/tugas-dan-fungsi-polri"
|
|
className="flex justify-between"
|
|
>
|
|
Tugas & Fungsi
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link href="/static/logo" className="flex justify-between">
|
|
Logo
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
<div>
|
|
<Link href="http://103.82.242.92:5555/" target="_blank">
|
|
Portal PPID
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<Dropdown className="dark:bg-[#1F1A17]">
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
Pelayanan Masyarakat
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
aria-label="pelayanan-masyarakat"
|
|
title="pelayanan-masyarakat"
|
|
className="pt-4"
|
|
classNames={{
|
|
list: "gap-2 flex flex-row flex-wrap",
|
|
}}
|
|
itemClasses={{
|
|
base: "w-[350px]",
|
|
}}
|
|
>
|
|
<DropdownItem>
|
|
<Link
|
|
href={"/form-permohonan-informasi"}
|
|
className="flex justify-between"
|
|
>
|
|
Formulir Permohonan Informasi
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://www.digitalkorlantas.id/sim/"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan SIM
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://erikkes.id/"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan e-Rikkes SIM
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://eppsi.id/"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan Test Psikologi SIM
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://e-avis.korlantas.polri.go.id/"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan e-Arvis
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://samsatdigital.id/"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan Samsat Digital
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan SKCK
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan Propam Presisi
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://dumaspresisi.polri.go.id/"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan Dumas Presisi
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://bos.polri.go.id/login"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Pelayanan Binmas
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<Link
|
|
href="https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2"
|
|
target="_blank"
|
|
className="flex justify-between"
|
|
>
|
|
Whistle Blower System
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
<div>
|
|
<Link href={"/kontak-kami"}>Kontak</Link>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="hidden lg:block">{searchInput}</div>
|
|
<div>
|
|
<ThemeSwitch />
|
|
</div>
|
|
{token ? (
|
|
// <Button className="bg-[#DD8306]" onPress={onLogout}>
|
|
// Logout
|
|
// </Button>
|
|
<Dropdown>
|
|
<DropdownTrigger>
|
|
<Button variant="bordered">Menu</Button>
|
|
</DropdownTrigger>
|
|
<DropdownMenu aria-label="Static Actions">
|
|
<DropdownItem
|
|
key="dashboard"
|
|
onPress={() => router.push("/admin/dashboard")}
|
|
>
|
|
Dashboard
|
|
</DropdownItem>
|
|
<DropdownItem key="dashboard">Profile</DropdownItem>
|
|
|
|
<DropdownItem
|
|
key="logout"
|
|
className="text-danger"
|
|
color="danger"
|
|
onPress={onLogout}
|
|
>
|
|
Logout
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
) : (
|
|
<Link href="/auth">
|
|
<Button className="bg-[#DD8306]">Login</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
|
|
<ThemeSwitch />
|
|
<NavbarMenuToggle />
|
|
<NavbarMenu>
|
|
{/* {searchInput} */}
|
|
<div className="mt-1 flex flex-col gap-1">
|
|
{siteConfig.humasMenuItems.map((item) => (
|
|
<div key={item.key} className="relative">
|
|
<NavbarMenuItem>
|
|
{item.key === "login" ? (
|
|
token ? (
|
|
<Button className="bg-[#DD8306]" onPress={onLogout}>
|
|
Logout
|
|
</Button>
|
|
) : (
|
|
<Link href="/auth">
|
|
<Button className="bg-[#DD8306]">Login</Button>
|
|
</Link>
|
|
)
|
|
) : item.key === "dashboard" ? (
|
|
token && (
|
|
<Link href="/admin/dashboard">
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
) : (
|
|
<div
|
|
onClick={() => toggleDropdown(item.key)}
|
|
className="flex items-end gap-2"
|
|
>
|
|
{item.href ? (
|
|
<Link href={item.href} target="_blank">
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
) : (
|
|
<span>{item.label}</span>
|
|
)}
|
|
{item.submenu &&
|
|
(dropdownOpen[item.key] ? (
|
|
<ChevronUpIcon />
|
|
) : (
|
|
<ChevronDownIcon />
|
|
))}
|
|
</div>
|
|
)}
|
|
</NavbarMenuItem>
|
|
{dropdownOpen[item.key] && item.submenu && (
|
|
<div className="pl-2">
|
|
{item.submenu.map((subItem, subIndex) => (
|
|
<div key={subIndex}>
|
|
<Link href={subItem.href}>{subItem.label}</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</NavbarMenu>
|
|
</NavbarContent>
|
|
</div>
|
|
</Navbar>
|
|
);
|
|
}
|