455 lines
25 KiB
TypeScript
455 lines
25 KiB
TypeScript
'use client'
|
|
import { Input } from '@nextui-org/input';
|
|
import { Navbar, NavbarContent, NavbarItem, NavbarMenuToggle } from '@nextui-org/navbar';
|
|
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, autocomplete } from '@nextui-org/react';
|
|
import Link from "next/link";
|
|
import { ChevronDownIcon, ChevronRightIcon, ChevronRightWhite, FbIcon, IdnIcon, IgIcon, SearchIcon, TtIcon, TwIcon, YtIcon } from '../icons';
|
|
import { ThemeSwitch } from '../theme-switch';
|
|
import Image from 'next/image';
|
|
|
|
export default function NavbarHumas() {
|
|
|
|
const handleClick = () => {
|
|
console.log('Link clicked!');
|
|
};
|
|
const searchInput = (
|
|
<Input
|
|
aria-label="Search"
|
|
classNames={{
|
|
inputWrapper: "bg-default-100",
|
|
input: "text-sm",
|
|
}}
|
|
labelPlacement="outside"
|
|
placeholder="Search..."
|
|
startContent={
|
|
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
|
}
|
|
type="search"
|
|
/>
|
|
);
|
|
return (
|
|
<Navbar maxWidth='full' height="8rem" className='dark:bg-[#1F1A17]'>
|
|
<div className='w-full h-full flex'>
|
|
<div className='min-w-max md:w-1/12 flex items-center justify-center'>
|
|
<Link href={'/'}>
|
|
<Image
|
|
height={100}
|
|
width={100}
|
|
src="/logohumas.png"
|
|
alt="logo"
|
|
className='min-w-max' />
|
|
</Link>
|
|
</div>
|
|
<div className='w-auto md:w-11/12 hidden md:flex flex-col justify-cente pt-3 space-y-3'>
|
|
<div className='flex items-center justify-end gap-1 md:gap-5'>
|
|
<div className="flex gap-1 lg:gap-3 items-center">
|
|
<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 '>
|
|
<Link href={'/'}>
|
|
<div>Beranda</div>
|
|
</Link>
|
|
<div>
|
|
<Dropdown className=' dark:bg-[#1F1A17]'>
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
Tentang
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
// aria-label="tentang"
|
|
// title='Tentang'
|
|
className="pt-4"
|
|
classNames={{
|
|
// base: "flex",
|
|
// list: "border-2 gap-2 flex flex-row flex-wrap"
|
|
list: "gap-2 flex flex-row flex-wrap"
|
|
}}
|
|
itemClasses={{
|
|
// base: "border border-red-700 w-[350px]"
|
|
base: "w-[350px]"
|
|
}}
|
|
>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}
|
|
>
|
|
<Link href='/tentang-humas-polri'>
|
|
Tentang Humas POLRI
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}
|
|
>
|
|
<Link href='/profile-pimpinan-polri'>
|
|
Profile Pimpinan POLRI
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='/struktur-organisasi'>
|
|
Struktur Organisasi
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='/visi-misi'>
|
|
Visi & Misi
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='/tugas-dan-fungsi'>
|
|
Tugas & Fungsi
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
Logo
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
<div><Link href="/portal-ppid">Portal PPID</Link></div>
|
|
<div>
|
|
<Dropdown className='dark:bg-[#1F1A17]'>
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
Pelayanan Masyarakat
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
aria-label="pelayanan-masyarakat"
|
|
title='pelayanan-masyarakat'
|
|
className="pt-4"
|
|
classNames={{
|
|
list: "gap-2 flex flex-row flex-wrap"
|
|
}}
|
|
itemClasses={{
|
|
base: "w-[350px]"
|
|
}}
|
|
>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}
|
|
>
|
|
<Link href={'/form-permohonan-informasi'}>
|
|
Formulir Permohonan Informasi
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}
|
|
>
|
|
<Link href='https://www.digitalkorlantas.id/sim/' target="_blank">
|
|
Pelayanan SIM
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='https://erikkes.id/' target="_blank">
|
|
Pelayanan e-Rikkes SIM
|
|
</Link>
|
|
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='https://eppsi.id/' target="_blank">
|
|
Pelayanan Test Psikologi SIM
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href="https://e-avis.korlantas.polri.go.id/" target='_blank'>
|
|
Pelayanan e-Arvis
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href="https://samsatdigital.id/" target='_blank'>
|
|
Pelayanan Samsat Digital
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US' target='_blank'>
|
|
Pelayanan SKCK
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam' target='_blank'>
|
|
Pelayanan Propam Presisi
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='https://dumaspresisi.polri.go.id/' target='_blank'>
|
|
Pelayanan Dumas Presisi
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='https://bos.polri.go.id/login' target='_blank'>
|
|
Pelayanan Binmas
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
endContent={<ChevronRightWhite />}>
|
|
<Link href='https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2' target='_blank'>
|
|
Whistle Blower System
|
|
</Link>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
<div>
|
|
<Link href={'/kontak-kami'}>Kontak</Link></div>
|
|
<div className='flex items-center gap-3'>
|
|
<div className='hidden lg:block'>{searchInput}</div>
|
|
<div><ThemeSwitch /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
|
|
<ThemeSwitch />
|
|
<NavbarMenuToggle />
|
|
</NavbarContent>
|
|
</div>
|
|
</Navbar>
|
|
// <Navbar
|
|
// shouldHideOnScroll
|
|
// position='static'
|
|
// maxWidth='full' isBlurred={true} className='h-28 md:h-36 dark:bg-[#1F1A17]'>
|
|
// <div className='w-1/12 min-w-max'>
|
|
// <img src="/logohumas.png" alt="" />
|
|
// </div>
|
|
// <div className='w-11/12 lg:w-8/12 font-semibold hidden md:block '>
|
|
// <div className='flex justify-around items-center'>
|
|
// <Link href={'/'}>
|
|
// <div>Beranda</div>
|
|
// </Link>
|
|
// <div>
|
|
// <Dropdown className=' dark:bg-[#1F1A17]'>
|
|
// <NavbarItem>
|
|
// <DropdownTrigger>
|
|
// <Button
|
|
// disableRipple
|
|
// className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
// radius="sm"
|
|
// variant="light"
|
|
// endContent={<ChevronDownIcon className="pt-1" />}
|
|
// >
|
|
// Tentang
|
|
// </Button>
|
|
// </DropdownTrigger>
|
|
// </NavbarItem>
|
|
// <DropdownMenu
|
|
// // aria-label="tentang"
|
|
// // title='Tentang'
|
|
// className="pt-4"
|
|
// classNames={{
|
|
// // base: "flex",
|
|
// // list: "border-2 gap-2 flex flex-row flex-wrap"
|
|
// list: "gap-2 flex flex-row flex-wrap"
|
|
// }}
|
|
// itemClasses={{
|
|
// // base: "border border-red-700 w-[350px]"
|
|
// base: "w-[350px]"
|
|
// }}
|
|
// >
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}
|
|
// >
|
|
// <Link href='/tentang-humas-polri'>
|
|
// Tentang Humas POLRI
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}
|
|
// >
|
|
// <Link href='/profile-pimpinan-polri'>
|
|
// Profile Pimpinan POLRI
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='/struktur-organisasi'>
|
|
// Struktur Organisasi
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='/visi-misi'>
|
|
// Visi & Misi
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='/tugas-dan-fungsi'>
|
|
// Tugas & Fungsi
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// Logo
|
|
// </DropdownItem>
|
|
// </DropdownMenu>
|
|
// </Dropdown>
|
|
// </div>
|
|
// <div><Link href="/portal-ppid">Portal PPID</Link></div>
|
|
// <div>
|
|
// <Dropdown className='dark:bg-[#1F1A17]'>
|
|
// <NavbarItem>
|
|
// <DropdownTrigger>
|
|
// <Button
|
|
// disableRipple
|
|
// className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
// radius="sm"
|
|
// variant="light"
|
|
// endContent={<ChevronDownIcon className="pt-1" />}
|
|
// >
|
|
// Pelayanan Masyarakat
|
|
// </Button>
|
|
// </DropdownTrigger>
|
|
// </NavbarItem>
|
|
// <DropdownMenu
|
|
// aria-label="pelayanan-masyarakat"
|
|
// title='pelayanan-masyarakat'
|
|
// className="pt-4"
|
|
// classNames={{
|
|
// list: "gap-2 flex flex-row flex-wrap"
|
|
// }}
|
|
// itemClasses={{
|
|
// base: "w-[350px]"
|
|
// }}
|
|
// >
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}
|
|
// >
|
|
// <Link href={'/form-permohonan-informasi'}>
|
|
// Formulir Permohonan Informasi
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}
|
|
// >
|
|
// <Link href='https://www.digitalkorlantas.id/sim/' target="_blank">
|
|
// Pelayanan SIM
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='https://erikkes.id/' target="_blank">
|
|
// Pelayanan e-Rikkes SIM
|
|
// </Link>
|
|
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='https://eppsi.id/' target="_blank">
|
|
// Pelayanan Test Psikologi SIM
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href="https://e-avis.korlantas.polri.go.id/" target='_blank'>
|
|
// Pelayanan e-Arvis
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href="https://samsatdigital.id/" target='_blank'>
|
|
// Pelayanan Samsat Digital
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US' target='_blank'>
|
|
// Pelayanan SKCK
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam' target='_blank'>
|
|
// Pelayanan Propam Presisi
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='https://dumaspresisi.polri.go.id/' target='_blank'>
|
|
// Pelayanan Dumas Presisi
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='https://bos.polri.go.id/login' target='_blank'>
|
|
// Pelayanan Binmas
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// <DropdownItem
|
|
// endContent={<ChevronRightWhite />}>
|
|
// <Link href='https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2' target='_blank'>
|
|
// Whistle Blower System
|
|
// </Link>
|
|
// </DropdownItem>
|
|
// </DropdownMenu>
|
|
// </Dropdown>
|
|
// </div>
|
|
// <div>
|
|
// <Link href={'/kontak-kami'}>Kontak</Link></div>
|
|
// <div><ThemeSwitch /></div>
|
|
// </div>
|
|
// </div>
|
|
// <div className='w-3/12 hidden lg:block'>
|
|
// <div className='flex items-center justify-between'>
|
|
// <div className="flex gap-1 lg:gap-3 items-center">
|
|
// <Link href='https://www.facebook.com/DivHumasPolri' target='_blank'>
|
|
// <FbIcon />
|
|
// </Link>
|
|
// <Link href='https://www.instagram.com/divisihumaspolri/' target='_blank'>
|
|
// <IgIcon />
|
|
// </Link>
|
|
// <Link href='https://www.youtube.com/user/pidhumaspolri' target='_blank'>
|
|
// <YtIcon />
|
|
// </Link>
|
|
// <Link href='https://twitter.com/DivHumas_Polri' target='_blank'>
|
|
// <TwIcon />
|
|
// </Link>
|
|
// <Link href='https://www.tiktok.com/@divhumas_polri' target='_blank'>
|
|
// <TtIcon />
|
|
// </Link>
|
|
// </div>
|
|
// <div className=''><IdnIcon /></div>
|
|
// </div>
|
|
// <div className='pb-10 pt-3'>
|
|
// {searchInput}
|
|
// </div>
|
|
// </div>
|
|
// <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
|
|
// <ThemeSwitch />
|
|
// <NavbarMenuToggle />
|
|
// </NavbarContent>
|
|
// </Navbar>
|
|
)
|
|
}
|