web-humas-fe/components/navbar.tsx

882 lines
27 KiB
TypeScript

'use client'
import { Input } from "@nextui-org/input";
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, Link } from "@nextui-org/react";
import { useEffect, useState } from "react";
export const Navbar = () => {
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"
classNames={{
wrapper: "max-w-full h-[90%]",
}}>
<NavbarBrand className="min-w-max">
<Image
src="/logohumas.png"
/>
</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=""
>
<DropdownItem>
<Link href="/about">
test
</Link>
</DropdownItem>
</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.humasMenuItems.map((item, index) => (
<NavbarMenuItem key={`${item}-${index}`}>
<Link
href={item.href}
>
{item.label}
</Link>
</NavbarMenuItem>
))}
</div>
</NavbarMenu>
</NextUINavbar>
);
};