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

528 lines
20 KiB
TypeScript

import { Link } from "@nextui-org/link";
import {
Navbar,
NavbarContent,
NavbarItem,
NavbarMenuToggle,
} from "@nextui-org/navbar";
import {
Button,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownTrigger,
} from "@nextui-org/react";
import {
ChevronDownIcon,
ChevronRightIcon,
FbIcon,
IdnIcon,
IgIcon,
TtIcon,
TwIcon,
YtIcon,
} from "../../icons";
import { ThemeSwitch } from "../../theme-switch";
import { usePathname } from "next/navigation";
export default function NavbarSatker() {
const pathname = usePathname();
const newPathname = pathname.split("/")[3];
const isPolda = pathname.split("/")[2] == "polda";
// console.log(isPolda, "polda");
return (
<Navbar maxWidth="full" height="8rem" className="dark:bg-[#1F1A17]">
<div className="w-full h-full flex">
<div className="w-auto lg:w-2/12 flex">
<Link href={"#"}>
<div className="h-full flex">
<img
src="/assets/satker/EPPID2.png"
alt="logo"
className="w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 flex"
/>
<div className="absolute top-5 right-[-35px]">
<img
src={`/assets/${
isPolda ? "polda" : "satker"
}/${newPathname}.svg`}
alt=""
className={isPolda ? "w-14 mr-12 mt-1" : "w-36 mr-1"}
/>
<div>{}</div>
</div>
</div>
</Link>
</div>
<div className="w-auto lg:w-10/12 hidden md:flex flex-col justify-cente pt-3 space-y-3">
<div className="flex items-center justify-end gap-1 md:gap-5">
<div className="flex gap-1 lg:gap-3 items-center">
<div>
<FbIcon />
</div>
<div>
<IgIcon />
</div>
<div>
<YtIcon />
</div>
<div>
<TwIcon />
</div>
<div>
<TtIcon />
</div>
</div>
<div>
<IdnIcon />
</div>
</div>
<div className="flex flex-wrap items-center justify-around">
<NavbarItem>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}`
: `/portal-ppid/satuan-kerja/${newPathname}`
}
color="foreground"
>
Beranda
</Link>
</NavbarItem>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Informasi Publik
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title="Tentang"
className="pt-4"
classNames={
{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}
}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]",
}}
>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/informasi-publik/informasi-serta-merta`
: `/portal-ppid/satuan-kerja/${newPathname}/informasi-publik/informasi-serta-merta`
}
color="foreground"
>
Informasi Serta Merta
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/informasi-publik/informasi-berkala`
: `/portal-ppid/satuan-kerja/${newPathname}/informasi-publik/informasi-berkala`
}
color="foreground"
>
Informasi Berkala
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/informasi-publik/informasi-setiap-saat`
: `/portal-ppid/satuan-kerja/${newPathname}/informasi-publik/informasi-setiap-saat`
}
color="foreground"
>
Informasi Setiap Saat
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/informasi-publik/informasi-dikecualikan`
: `/portal-ppid/satuan-kerja/${newPathname}/informasi-publik/informasi-dikecualikan`
}
color="foreground"
>
Informasi Dikecualikan
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/informasi-publik/informasi-penerangan-satuan`
: `/portal-ppid/satuan-kerja/${newPathname}/informasi-publik/penerangan-satuan`
}
color="foreground"
>
Penerangan Satuan
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/informasi-publik/uu-dan-peraturan`
: `/portal-ppid/satuan-kerja/${newPathname}/informasi-publik/uu-dan-peraturan`
}
color="foreground"
>
UU & Peraturan
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Profile
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title="Tentang"
className="pt-4"
classNames={
{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}
}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]",
}}
>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/profile/sejarah-ppid-polri`
: `/portal-ppid/satuan-kerja/${newPathname}/profile/sejarah-ppid-polri`
}
color="foreground"
>
Sejarah PPID Polri
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/profile/profile-singkat-ppid`
: `/portal-ppid/satuan-kerja/${newPathname}/profile/profile-singkat-ppid`
}
color="foreground"
>
Profile Singkat PPID
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/profile/tugas-dan-fungsi-ppid`
: `/portal-ppid/satuan-kerja/${newPathname}/profile/tugas-dan-fungsi-ppid`
}
color="foreground"
>
Tugas dan Fungsi PPID
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/profile/struktur-ppid`
: `/portal-ppid/satuan-kerja/${newPathname}/profile/struktur-ppid`
}
color="foreground"
>
Struktur PPID
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/profile/visi-dan-misi-ppid`
: `/portal-ppid/satuan-kerja/${newPathname}/profile/visi-dan-misi-ppid`
}
color="foreground"
>
Visi & Misi PPID
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Layanan Informasi
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title="Tentang"
className="pt-4"
classNames={
{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}
}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]",
}}
>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/layanan-informasi/registrasi-permohonan`
: `/portal-ppid/satuan-kerja/${newPathname}/layanan-informasi/registrasi-permohonan`
}
color="foreground"
>
Registrasi Permohonan
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/layanan-informasi/permohonan-informasi`
: `/portal-ppid/satuan-kerja/${newPathname}/layanan-informasi/permohonan-informasi`
}
color="foreground"
>
Permohonan Informasi
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/layanan-informasi/permohonan-keberatan`
: `/portal-ppid/satuan-kerja/${newPathname}/layanan-informasi/permohonan-keberatan`
}
color="foreground"
>
Permohonan Keberatan
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/layanan-informasi/statistik-rekapitulasi`
: `/portal-ppid/satuan-kerja/${newPathname}/layanan-informasi/statistik-rekapitulasi`
}
color="foreground"
>
Statistik / Rekapitulasi
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/layanan-informasi/ppid-laporan-tahunan`
: `/portal-ppid/satuan-kerja/${newPathname}/layanan-informasi/ppid-laporan-tahunan`
}
color="foreground"
>
Laporan Informasi Publik Tahunan
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Standar Layanan
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title="Tentang"
className="pt-4"
classNames={
{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}
}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]",
}}
>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/standar-layanan/alur-pelayanan-informasi-publik`
: `/portal-ppid/satuan-kerja/${newPathname}/standar-layanan/alur-pelayanan-informasi-publik`
}
color="foreground"
>
Alur Pelayanan Informasi Publik Polri
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/standar-layanan/tata-cara-permohonan-informasi`
: `/portal-ppid/satuan-kerja/${newPathname}/standar-layanan/tata-cara-permohonan-informasi`
}
color="foreground"
>
Tata Cara Permohonan Informasi
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/standar-layanan/mekanisme-keberatan`
: `/portal-ppid/satuan-kerja/${newPathname}/standar-layanan/mekanisme-keberatan`
}
color="foreground"
>
Mekanisme Keberatan
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/standar-layanan/mekanisme-permohonan-penyelesaian-sengketa`
: `/portal-ppid/satuan-kerja/${newPathname}/standar-layanan/mekanisme-permohonan-penyelesaian-sengketa`
}
color="foreground"
>
Mekanisme Permohonan Penyelesainan Sengketa
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/standar-layanan/waktu-pelayanan`
: `/portal-ppid/satuan-kerja/${newPathname}/standar-layanan/waktu-pelayanan`
}
color="foreground"
>
Waktu Pelayanan
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/standar-layanan/standar-biaya-pelayanan`
: `/portal-ppid/satuan-kerja/${newPathname}/standar-layanan/standar-biaya-pelayanan`
}
color="foreground"
>
Standar Biaya Pelayanan
</Link>
</DropdownItem>
<DropdownItem endContent={<ChevronRightIcon />}>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/standar-layanan/maklumat-pelayanan`
: `/portal-ppid/satuan-kerja/${newPathname}/standar-layanan/maklumat-pelayanan`
}
color="foreground"
>
Maklumat Pelayanan
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavbarItem>
<Link
href={
isPolda
? `/portal-ppid/polda/${newPathname}/regulasi`
: `/portal-ppid/satuan-kerja/${newPathname}/regulasi`
}
color="foreground"
>
Regulasi
</Link>
</NavbarItem>
<NavbarItem>
<Link href="#footer-satker" color="foreground">
Kontak
</Link>
</NavbarItem>
<div>
<ThemeSwitch />
</div>
</div>
</div>
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
<ThemeSwitch />
<NavbarMenuToggle />
</NavbarContent>
</div>
</Navbar>
);
}