'use client'
import { Input } from "@nextui-org/input";
import { Link } from "@nextui-org/link";
import {
    NavbarBrand,
    NavbarContent,
    NavbarItem,
    NavbarMenu,
    NavbarMenuItem,
    NavbarMenuToggle,
    Navbar as NextUINavbar
} from "@nextui-org/navbar";



import {
    ChevronDownIcon,
    FbIcon,
    IgIcon,
    SearchIcon,
    TtIcon,
    TwIcon,
    YtIcon
} from "@/components/icons";
import { ThemeSwitch } from "@/components/theme-switch";

import { siteConfig } from "@/config/site";
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger, Image } from "@nextui-org/react";
import { useEffect, useState } from "react";

export const PPIDNavbar = () => {
    const [hasMounted, setHasMounted] = useState(false);

    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"
        />
    );

    useEffect(() => {
        setHasMounted(true);
    }, []);

    // Render
    if (!hasMounted) return null;

    return (
        <NextUINavbar className="h-28 md:h-36"
            position="static"
            classNames={{
                wrapper: "max-w-full h-[90%]",
            }}>
            <NavbarBrand className="min-w-max">
                <Link href="/">
                    <Image
                        src="/logohumas.png"
                    />
                </Link>
            </NavbarBrand>
            <NavbarContent className="hidden md:flex   basis-3/5 gap-0 md:gap-4 lg:gap-12 px-auto lg:px-10" justify="center">
                <NavbarItem>
                    <div >
                        <Dropdown>
                            <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"
                                className=""
                            >
                                <DropdownSection
                                    title="Pelayanan Masyarakat" showDivider
                                    classNames={{
                                        group: "flex flex-row",
                                        base: "",

                                    }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/logo1.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">Pelayanan Surat Pemberitahuan Perkembangan Hasil Penyidikan Online</div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm2.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Formulir Permohonan Informasi</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Permohonan Formulir Informasi
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm3.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan SIM</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM Berbasis Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm4.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan E-Rikkes SIM</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi Berbasis Online Dalam Proses Penerbitan SIM.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm5.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan Test Psikologi SIM</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Pembuatan Test Psikologi SIM Berbasis Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm6.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan E-Avis</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Ujian Teori SIM Berbasis Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm7.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan Samsat Digital</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Samsat Berbasis Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm8.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan SKCK</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Pembuatan SKCK Berbasis Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm9.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan Propam Presisi</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu Kejadian atau Kejahatan.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm10.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan Dumas Presisi</div>
                                                <div className="truncate max-w-min">
                                                    Layanan Pengaduan Masyarakat Terintegrasi Berbasis Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm11.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Pelayanan Binmas</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/pm12.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Clean & Clear Polri</div>
                                                <div className="truncate max-w-min">
                                                    Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan Anggota POLRI.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </NavbarItem>
                <NavbarItem >
                    <Link href="/portal-ppid">
                        <Button
                            className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                            variant="light">
                            Portal PPID
                        </Button>
                    </Link>
                    {/* <Dropdown className="w-[97vw]">
						<DropdownTrigger>
							<Button
								className="bg-transparent p-0 text-medium font-semibold data-[hover=true]:bg-transparent"
								variant="light"
							>
								Portal PPID
							</Button>
						</DropdownTrigger>
						<DropdownMenu
							aria-label="Action event example"
							onAction={(key) => alert(key)}
							classNames={{
								base: 'border-2 border-green-500 '
							}}
							itemClasses={{
								wrapper: "border-2 border-green-500",
								base: "w-[350px] text-wrap"
							}}
							itemClasses={{
								base: 'border-2 border-pink-500 w-80 data-[hover=true]:w-max'
							}}
						>
							<DropdownSection
								classNames={{
									group: "flex",
								}}>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
							</DropdownSection>
						</DropdownMenu>
					</Dropdown> */}
                </NavbarItem>
                <NavbarItem>
                    <div >
                        <Dropdown>
                            <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" />}
                                    >
                                        Publikasi
                                    </Button>
                                </DropdownTrigger>
                            </NavbarItem>
                            <DropdownMenu
                                aria-label="pelayanan-masyarakat"
                                className=""
                            >
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </NavbarItem>
                <NavbarItem>
                    <div >
                        <Dropdown>
                            <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="pelayanan-masyarakat"
                                className=""
                            >
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem><DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="sp2hp"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </NavbarItem>
                <NavbarItem>
                    <div >
                        <Dropdown>
                            <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" />}
                                    >
                                        Aplikasi Terkait
                                    </Button>
                                </DropdownTrigger>
                            </NavbarItem>
                            <DropdownMenu
                                aria-label="pelayanan-masyarakat"
                                className=""
                            >
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="1"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at1.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Polri Super App</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK, Pengaduan Masyarakat.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="2"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at2.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Media Hub</div>
                                                <div className="truncate max-w-min">
                                                    Humas Polri dalam Data.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="3"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at3.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Polisiku</div>
                                                <div className="truncate max-w-min">
                                                    Membantu anggota Kepolisian untuk mengindetifikasi masalah di lapangan.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="4"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at4.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SP2HP</div>
                                                <div className="truncate max-w-min">
                                                    Surat Pemberitahuan Perkembangan Hasil Penyidikan Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="5"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at5.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Polri TV</div>
                                                <div className="truncate max-w-min">
                                                    Humas Polri dalam Audio Visual.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="6"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at6.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Polri Radio</div>
                                                <div className="truncate max-w-min">
                                                    Humas Polri dalam Audio.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="7"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at7.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>E-Avis</div>
                                                <div className="truncate max-w-min">
                                                    Platform Ujian Teori SIM.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="8"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at8.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>E-Rikkes</div>
                                                <div className="truncate max-w-min">
                                                    Pemeriksaan Kesehatan Berbassi Teknologi Secara Online dalam Proses Penerbitan SIM.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="9"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at9.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>E-PPSI</div>
                                                <div className="truncate max-w-min">
                                                    Tes Psikologis SIM Secara Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="10"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at10.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>BOS</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="11"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at11.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Signal</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi Samsat Digital Nasional.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="12"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at12.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SKCK Online</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi Pembuatan SKCK Secara Online.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="13"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at13.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Propam Presisi</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="14"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at14.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Monitoring Presisi</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya Melaporkan Tugas.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="15"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at15.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>SDM - Penerimaan POLRI</div>
                                                <div className="truncate max-w-min">
                                                    Website untuk Memonitoring Penerimaan Anggota POLRI.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="16"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at16.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Wistle Blowing System</div>
                                                <div className="truncate max-w-min">
                                                    Website untuk Pengaduan Penerimaan Anggota POLRI.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                                <DropdownSection classNames={{
                                    group: "flex flex-row",
                                    base: "",

                                }}>
                                    <DropdownItem
                                        key="17"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at17.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Dumas Presisi</div>
                                                <div className="truncate max-w-min">
                                                    Website Layanan Pengaduan Masyarakat Terintegrasi.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="18"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at18.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Clean & Clear Polri</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi untuk Memonitoring Penerimaan Angota POLRI.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="19"
                                    >
                                        <div className="flex items-center w-[350px]">
                                            <div className="min-w-max"><img src="/at19.png" alt="" /></div>
                                            <div className="text-xs pl-2">
                                                <div>Sinar</div>
                                                <div className="truncate max-w-min">
                                                    Aplikasi dan Website Pelayanan Pendaftaran dan Perpanjangan SIM.
                                                </div>
                                            </div>
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem
                                        key="12"
                                    >
                                        <div className="flex items-center w-[350px]">

                                        </div>
                                    </DropdownItem>
                                </DropdownSection>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </NavbarItem>
                <NavbarItem>
                    <ThemeSwitch />
                </NavbarItem>
            </NavbarContent>
            <NavbarContent className="hidden sm:hidden md:hidden lg:flex basis-1/5  flex-col items-center ">
                <div className="flex gap-3">
                    <div><FbIcon /></div>
                    <div><IgIcon /></div>
                    <div><YtIcon /></div>
                    <div><TwIcon /></div>
                    <div><TtIcon /></div>
                </div>
                <div className="font-bold">{searchInput}</div>
            </NavbarContent>

            <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
                <ThemeSwitch />
                <NavbarMenuToggle />
            </NavbarContent>

            <NavbarMenu>
                {/* {searchInput} */}
                <div className="mx-4 mt-2 flex flex-col gap-2 pt-10">
                    {siteConfig.navMenuItems.map((item, index) => (
                        <NavbarMenuItem key={`${item}-${index}`}>
                            <Link
                                href={item.href}
                                size="lg"
                            >
                                {item.label}
                            </Link>
                        </NavbarMenuItem>
                    ))}
                </div>
            </NavbarMenu>
        </NextUINavbar>
    );
};