web-humas-fe/components/layout/navbar/NavbarHumas.tsx

"use client";
import { siteConfig } from "@/config/site";
import { Input } from "@heroui/input";
import {
  Navbar,
  NavbarContent,
  NavbarItem,
  NavbarMenu,
  NavbarMenuItem,
  NavbarMenuToggle,
} from "@heroui/navbar";
import {
  Button,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@heroui/react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import {
  ChevronDownIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  FbIcon,
  FbIconNav,
  IdnIcon,
  IgIcon,
  SearchIcon,
  TtIcon,
  TwIcon,
  UKIcon,
  YtIcon,
} from "../../icons";
import { ThemeSwitch } from "../../theme-switch";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import storedLanguage from "@/store/language-store";

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(props: { size: string }) {
  const { size } = props;
  const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();
  const t = useTranslations("Navbar");
  const token = Cookies.get("access_token");
  const isAuthenticated = Cookies.get("is_authenticated");
  const [isScrolled, setIsScrolled] = useState(false);

  const language = storedLanguage((state) => state.locale);
  const setLanguage = storedLanguage((state) => state.setLocale);

  // useEffect(() => {
  //   if (!isAuthenticated) {
  //     onLogout();
  //   }
  // }, [token]);

  const onLogout = () => {
    Object.keys(Cookies.get()).forEach((cookieName) => {
      Cookies.remove(cookieName, { path: "/" });
    });
    router.push("/auth");
  };

  const toggleDropdown = (key: any) => {
    setDropdownOpen({
      ...dropdownOpen,
      [key]: !dropdownOpen[key],
    });
  };

  const searchInput = (
    <Input
      aria-label="search"
      className="w-full"
      classNames={{
        inputWrapper: "bg-default-100",
        input: "text-sm",
      }}
      labelPlacement="outside"
      placeholder={t("search")}
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none" />
      }
      type="search"
    />
  );

  // useEffect(() => {
  //   const handleScroll = () => {
  //     setIsScrolled(window.scrollY > 0);
  //   };

  //   window.addEventListener("scroll", handleScroll);

  //   return () => {
  //     window.removeEventListener("scroll", handleScroll);
  //   };
  // }, []);

  useEffect(() => {
    const mainElement = document.querySelector("main");

    const handleScroll = () => {
      if (mainElement) {
        setIsScrolled(mainElement.scrollTop > 0);
      }
    };

    mainElement?.addEventListener("scroll", handleScroll);

    return () => {
      mainElement?.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <Navbar
      isBordered
      maxWidth="full"
      height={size === "sm" ? "6rem" : "8rem"}
      className={`transition-all duration-300 ease-in-out backdrop-opacity-10 ${
        size === "sm"
          ? "lg:hidden !bg-slate-50 dark:!bg-black "
          : "hidden lg:block"
      } ${isScrolled ? "bg-white dark:bg-[#1F1A17] " : "bg-opacity-50"}`}
      classNames={{ wrapper: "px-0" }}
    >
      <div className="w-full h-full flex">
        <div className="w-full hidden lg:flex flex-row">
          <div
            className={`flex flex-wrap items-center justify-between px-[50px] w-full ${
              isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
            }`}
          >
            <Link href={"/"}>
              <Image
                width={720}
                height={720}
                src="/logohumas.png"
                alt="logo"
                className="w-[95px]"
              />
            </Link>
            <Dropdown
              className="bg-white dark:bg-[#1F1A17] "
              radius="none"
              classNames={{ base: "shadow-none" }}
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("pelayananMasyarakat")}
                  </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-[450px]",
                }}
              >
                <DropdownItem
                  key="SP2HP"
                  onPress={() =>
                    window.open(
                      "https://sp2hp.bareskrim.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at4.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">SP2HP</p>
                      <p className="text-[12px] font-light overflow-hidden">
                        Pelayanan Surat Pemberitahuan Perkembangan Hasil
                        Penyidikan Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem key="Formulir Permohonan Informasi">
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm2.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">
                        Formulir Permohonan Informasi
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Permohonan Formulir Informasi
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"SIM"}
                  onPress={() =>
                    window.open(
                      "https://www.digitalkorlantas.id/sim/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm3.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Pelayanan SIM</p>
                      <p className="text-[12px] font-light overflow-hidden">
                        Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM
                        Berbasis Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"erikkes"}
                  onPress={() => window.open("https://erikkes.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm4.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">
                        Pelayanan e-Rikkes SIM
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi
                        Berbasis Online Dalam Proses Penerbitan SIM
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"eppsi"}
                  onPress={() => window.open("https://eppsi.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm5.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">
                        Pelayanan Test Psikologi SIM
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Pembuatan Test Psikologi SIM Berbasis Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"eavis"}
                  onPress={() =>
                    window.open(
                      "https://e-avis.korlantas.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm6.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Pelayanan e-Avis</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Ujian Teori SIM Berbasis Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"samsat"}
                  onPress={() =>
                    window.open("https://samsatdigital.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm7.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Pelayanan Samsat Digital
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Samsat Berbasis Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"skck"}
                  onPress={() =>
                    window.open("https://skck.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm8.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Pelayanan SKCK</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Pembuatan SKCK Berbasis Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"propam"}
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam&pli=1",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm9.png"
                      className="w-[50px] h-[50px] "
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Pelayanan Propam Presisi
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu
                        Kejadian atau Kejahatan{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"dumas"}
                  onPress={() =>
                    window.open("https://dumaspresisi.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm10.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Pelayanan Dumas Presisi{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Layanan Pengaduan Masyarakat Terintegrasi Berbasis
                        Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"binmas"}
                  onPress={() =>
                    window.open("https://bos.polri.go.id/login", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm11.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Pelayanan Binmas </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Berbasis Website Sistem Informasi Satpam
                        Online, BUJP, Pelaporan Binmas
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key={"ccpolri"}
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm12.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Clean & Clear Polri{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan
                        Anggota POLRI
                      </p>
                    </div>
                  </div>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>{" "}
            <Link
              href="https://eppid.polri.go.id/"
              target="_blank"
              className="font-semibold"
            >
              E-PPID
            </Link>
            {/* <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("publikasi")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("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 key={"humas"}>
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"profil"}>
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"struktur"}>
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"visimisi"}>
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"fungsi"}>
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"logo"}>
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown> */}
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("informasi_publik")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("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 key={"humas"}>
                  <Link
                    href="https://eppid.polri.go.id/informasi-publik/informasi-berkala"
                    className="flex  justify-between"
                  >
                    Informasi Berkala
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"profil"}>
                  <Link
                    href="https://eppid.polri.go.id/informasi-publik/informasi-serta-merta"
                    className="flex  justify-between"
                  >
                    Informasi Serta Merta
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"struktur"}>
                  <Link
                    href="https://eppid.polri.go.id/informasi-publik/informasi-setiap-saat"
                    className="flex  justify-between"
                  >
                    Informasi Setiap Saat
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"visimisi"}>
                  <Link
                    href="https://eppid.polri.go.id/informasi-publik/informasi-dikecualikan"
                    className="flex  justify-between"
                  >
                    Informasi Dikecualikan
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"fungsi"}>
                  <Link
                    href="https://sisdivkum.id/library/peraturan-kepolisian"
                    className="flex  justify-between"
                  >
                    UU & Peraturan
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("tentang")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("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 key={"humas"}>
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"profil"}>
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"struktur"}>
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"visimisi"}>
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"fungsi"}>
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key={"logo"}>
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("aplikasi_terkait")}
                  </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-[450px]",
                }}
              >
                <DropdownItem
                  key="superapp"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at1.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polri Super App</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK,
                        Pengaduan Masyarakat
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="mediahub"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at2.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Media Hub</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Humas Polri dalam Data
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="polisiku"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at3.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polisiku</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Membantu anggota Kepolisian untuk mengindetifikasi
                        masalah di lapangan{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="sp2hp"
                  onPress={() =>
                    window.open(
                      "https://sp2hp.bareskrim.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at4.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">SP2HP</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="polritv"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.polritv",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at5.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polri TV</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Humas Polri dalam Audio Visual
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="polriradio"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.polritv",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at6.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polri Radio</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Humas Polri dalam Audio
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="eavis"
                  onPress={() =>
                    window.open(
                      "https://e-avis.korlantas.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm6.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">e-Avis</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Platform Ujian Teori SIM{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="erikkes"
                  onPress={() => window.open("https://erikkes.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm4.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">e-Rikkes</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pemeriksaan Kesehatan Berbassi Teknologi Secara Online
                        dalam Proses Penerbitan SIM
                      </p>
                    </div>
                  </div>
                </DropdownItem>

                <DropdownItem
                  key="eppsi"
                  onPress={() => window.open("https://eppsi.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm5.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">e-PPSI</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Tes Psikologis SIM Secara Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="bos"
                  onPress={() =>
                    window.open("https://bos.polri.go.id/login", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm11.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">BOS </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan
                        Binmas
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="signal"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=app.signal.id",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm7.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Signal</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Samsat Digital Nasional{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="skck"
                  onPress={() =>
                    window.open("https://skck.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm8.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">SKCK Online</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Pembuatan SKCK Secara Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="propam"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm9.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Propam Presisi</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah
                      </p>
                    </div>
                  </div>
                </DropdownItem>

                <DropdownItem
                  key="presisi"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at14.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Monitoring Presisi
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya
                        Melaporkan Tugas
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="sdm"
                  onPress={() =>
                    window.open("https://penerimaan.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at15.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        SDM - Penerimaan POLRI
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Website untuk Memonitoring Penerimaan Anggota POLRI
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="wbs"
                  onPress={() =>
                    window.open(
                      "https://pengaduan-penerimaan.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/at16.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Whistle Blowing System{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Website untuk Pengaduan Penerimaan Anggota POLRI{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="dumas"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.admasolusi.monitoringpresisi",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm10.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Dumas Presisi</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Website Layanan Pengaduan Masyarakat Terintegrasi
                      </p>
                    </div>
                  </div>
                </DropdownItem>

                <DropdownItem
                  key="ccpolri"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm12.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Clean and Clear POLRI{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi untuk Memonitoring Penerimaan Angota POLRI
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="korlantas"
                  onPress={() =>
                    window.open(
                      "https://www.digitalkorlantas.id/sim/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2 items-center">
                    <Image
                      width={360}
                      height={360}
                      alt="logo"
                      src="/pm3.png"
                      className="w-[50px] h-[50px]"
                    />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Sinar</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi dan Website Pelayanan Pendaftaran dan
                        Perpanjangan SIM
                      </p>
                    </div>
                  </div>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <div className="flex flex-col gap-3">
              <div className="flex">
                <div className="flex gap-1 lg:gap-3 items-center">
                  <Link
                    href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
                    target="_blank"
                  >
                    <div className="bg-gray-200 dark:bg-default-900 p-1.5 rounded-md">
                      <FbIconNav size={16} />
                    </div>
                  </Link>
                  <Link
                    href="https://www.instagram.com/divisihumaspolri/"
                    target="_blank"
                  >
                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
                      <IgIcon size={24} />
                    </div>
                  </Link>
                  <Link
                    href="https://www.youtube.com/user/pidhumaspolri"
                    target="_blank"
                  >
                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
                      <YtIcon size={24} />
                    </div>
                  </Link>
                  <Link
                    href="https://twitter.com/DivHumas_Polri"
                    target="_blank"
                  >
                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-1 rounded-md">
                      <TwIcon size={20} />
                    </div>
                  </Link>
                  <Link
                    href="https://www.tiktok.com/@divhumas_polri"
                    target="_blank"
                  >
                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
                      <TtIcon size={24} />
                    </div>
                  </Link>

                  <div className="bg-gray-200 dark:bg-default-900 rounded-md py-0.5 px-1">
                    <ThemeSwitch />
                  </div>
                  <a
                    className="cursor-pointer"
                    onClick={() =>
                      language === "id" ? setLanguage("en") : setLanguage("id")
                    }
                  >
                    {language === "id" ? <IdnIcon /> : <UKIcon />}
                  </a>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="hidden lg:block w-full">{searchInput}</div>

                {/* <a
                  className="cursor-pointer"
                  onClick={() =>
                    language === "id" ? setLanguage("en") : setLanguage("id")
                  }
                >
                  {language === "id" ? <IdnIcon /> : <UKIcon />}
                </a>
                <div>
                  <ThemeSwitch />
                </div> */}
              </div>
            </div>
          </div>
        </div>
        <NavbarContent
          className={`px-2 lg:hidden transition-all duration-300 ease-in-out backdrop-opacity-10 ${
            isScrolled ? "bg-slate-100 dark:bg-[#1F1A17] " : "bg-opacity-50"
          }`}
        >
          <div className="flex justify-between w-full">
            <Link href={"/"}>
              <Image
                width={480}
                height={480}
                src="/logohumas.png"
                alt="logo"
                className="w-[78px]"
              />
            </Link>
            <div className="flex flex-row gap-3 items-center">
              <a
                className="cursor-pointer"
                onClick={() =>
                  language === "id" ? setLanguage("en") : setLanguage("id")
                }
              >
                {language === "id" ? <IdnIcon size={24} /> : <UKIcon />}
              </a>
              <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] text-white"
                              onPress={onLogout}
                            >
                              Logout
                            </Button>
                          ) : (
                            <Link href="/auth">
                              <Button className="bg-[#DD8306] text-white">
                                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>{t(item.label)}</span>
                            )}
                            {item.submenu &&
                              (dropdownOpen[item.key] ? (
                                <ChevronUpIcon />
                              ) : (
                                <ChevronDownIcon />
                              ))}
                          </div>
                        )}
                      </NavbarMenuItem>
                      {dropdownOpen[item.key] && item.submenu && (
                        <div className="grid grid-cols-2 gap-2">
                          {item.submenu.map((subItem: any, subIndex) => (
                            <div key={subIndex}>
                              <Link
                                href={subItem.href}
                                target={subItem.blank ? "_black" : ""}
                                className="flex flex-row gap-2 items-center text-sm"
                              >
                                {subItem.img && (
                                  <Image
                                    width={480}
                                    height={480}
                                    alt={subItem.img}
                                    src={subItem.img}
                                    className="w-[35px] h-[35px] object-cover"
                                  />
                                )}
                                {subItem.multi
                                  ? t(subItem.multi)
                                  : subItem.label}
                              </Link>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </NavbarMenu>
            </div>
          </div>
        </NavbarContent>
      </div>
    </Navbar>
  );
}