feat:landing menus

components/landing/banner-new.tsx

@@ -25,9 +25,20 @@ import {
   DropdownItem,
   Button,
   Input,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  useDisclosure,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Accordion,
+  AccordionItem,
 } from "@heroui/react";
 import storedLanguage from "@/store/language-store";
 import { ThemeSwitch } from "../theme-switch";
+import { siteConfig, SiteConfig } from "@/config/site";
 
 const images = [
   "/landing-1.jpg",
@@ -38,9 +49,11 @@ const images = [
 
 export default function BannerHumasNew() {
   const t = useTranslations("Banner");
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
   const [currentIndex, setCurrentIndex] = useState(0);
   const [resetTimer, setResetTimer] = useState(0);
-  const [onOpen, setOnOpen] = useState(false);
+  const [onOpenDropdown, setOnOpenDropdown] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const language = storedLanguage((state) => state.locale);
   const setLanguage = storedLanguage((state) => state.setLocale);
@@ -64,6 +77,120 @@ export default function BannerHumasNew() {
     setResetTimer((prev) => prev + 1);
   };
 
+  const MenuPopover = (props: {
+    title: string;
+    menus: any;
+    placement: "right" | "right-end" | "right-start";
+    withImage: boolean;
+  }) => {
+    const { title, placement, menus, withImage } = props;
+    return (
+      <Popover placement={placement} classNames={{ content: "w-fit" }}>
+        <PopoverTrigger>
+          <a className="cursor-pointer px-2 w-full font-semibold text-sm flex justify-between hover:underline">
+            {title}
+            <ChevronRightIcon />
+          </a>
+        </PopoverTrigger>
+        <PopoverContent className="ml-2 w-fit">
+          <div
+            className={` px-1 py-2 text-black grid gap-2 ${
+              withImage ? " grid-cols-3" : "grid-cols-1 gap-2"
+            } `}
+          >
+            {menus?.map((menu: any) => (
+              <Link
+                key={menu.label}
+                className={` flex flex-row gap-2 items-center group`}
+                href={menu.href}
+                target="_blank"
+              >
+                {withImage && (
+                  <Image
+                    width={720}
+                    height={720}
+                    alt="logo"
+                    src={menu.img}
+                    className="w-[45px] h-[45px]"
+                  />
+                )}
+
+                <div
+                  className={
+                    withImage ? `flex flex-col` : "flex justify-between w-full"
+                  }
+                >
+                  <p className="text-[14px] font-semibold group-hover:underline">
+                    {menu.label}
+                  </p>
+                  {withImage && (
+                    <p className="text-[10px] font-light overflow-hidden">
+                      {menu.desc}
+                    </p>
+                  )}
+                </div>
+              </Link>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  };
+
+  const MenuPopoverMobile = (props: {
+    title: string;
+    menus: any;
+    placement: "right" | "right-end" | "right-start";
+    withImage: boolean;
+  }) => {
+    const { title, placement, menus, withImage } = props;
+
+    return (
+      <Accordion className="w-full">
+        <AccordionItem
+          key={title}
+          aria-label={title}
+          title={title}
+          classNames={{ title: "font-semibold" }}
+        >
+          <div
+            className={` px-1 py-2 text-black grid gap-2 ${
+              withImage ? " grid-cols-2 " : "grid-cols-2"
+            } `}
+          >
+            {menus?.map((menu: any) => (
+              <Link
+                key={menu.label}
+                className={` flex flex-row gap-2 items-center group`}
+                href={menu.href}
+                target="_blank"
+              >
+                {withImage && (
+                  <Image
+                    width={720}
+                    height={720}
+                    alt="logo"
+                    src={menu.img}
+                    className="w-[35px] h-[35px]"
+                  />
+                )}
+
+                <div
+                  className={
+                    withImage ? `flex flex-col` : "flex justify-between w-full"
+                  }
+                >
+                  <p className="text-[14px] group-hover:underline">
+                    {menu.label}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </AccordionItem>
+      </Accordion>
+    );
+  };
   return (
     <div className="h-fit relative text-white overflow-hidden">
       <div
@@ -104,29 +231,81 @@ export default function BannerHumasNew() {
           </div>
           <div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10">
             <div className="flex flex-row  gap-6">
-              <Dropdown onOpenChange={setOnOpen}>
+              <Popover
-                <DropdownTrigger>
+                placement="bottom"
+                isOpen={onOpenDropdown}
+                onOpenChange={setOnOpenDropdown}
+              >
+                <PopoverTrigger>
                   <Button
-                    className="w-full lg:w-[200px] bg-white dark:bg-stone-900"
+                    className="w-full lg:w-[225px] bg-white dark:bg-stone-900"
                     radius="sm"
                     endContent={
-                      onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
+                      onOpenDropdown ? <ChevronUpIcon /> : <ChevronDownIcon />
                     }
                   >
                     <p className="text-left w-full  font-bold text-md">Menu</p>
                   </Button>
-                </DropdownTrigger>
+                </PopoverTrigger>
-                <DropdownMenu>
+                <PopoverContent className="w-full lg:w-[225px]  py-3 px-2">
-                  <DropdownItem key="pemas">Pelayanan Masyarakat</DropdownItem>
+                  <div className="space-y-1 hidden lg:block">
-                  <DropdownItem key="info">Informasi Publik</DropdownItem>
+                    <MenuPopover
-                  <DropdownItem key="tentang">Tentang</DropdownItem>
+                      title="Pelayanan Masyarakat"
-                  <DropdownItem key="apps">Aplikasi Polri</DropdownItem>
+                      menus={siteConfig.humasMenuItems[0].submenu}
-                </DropdownMenu>
+                      placement="right"
-              </Dropdown>
+                      withImage={true}
+                    />
+                    <MenuPopover
+                      title="Informasi Publik"
+                      menus={siteConfig.humasMenuItems[2].submenu}
+                      placement="right-start"
+                      withImage={false}
+                    />
+                    <MenuPopover
+                      title="Tentang"
+                      menus={siteConfig.humasMenuItems[3].submenu}
+                      placement="right-start"
+                      withImage={false}
+                    />
+                    <MenuPopover
+                      title="Aplikasi Polri"
+                      menus={siteConfig.humasMenuItems[4].submenu}
+                      placement="right"
+                      withImage={true}
+                    />
+                  </div>
+                  <div className="space-y-1 lg:hidden w-[90vw] max-h-[50vh] overflow-auto">
+                    <MenuPopoverMobile
+                      title="Pelayanan Masyarakat"
+                      menus={siteConfig.humasMenuItems[0].submenu}
+                      placement="right"
+                      withImage={true}
+                    />
+                    <MenuPopoverMobile
+                      title="Informasi Publik"
+                      menus={siteConfig.humasMenuItems[2].submenu}
+                      placement="right-start"
+                      withImage={false}
+                    />
+                    <MenuPopoverMobile
+                      title="Tentang"
+                      menus={siteConfig.humasMenuItems[3].submenu}
+                      placement="right-start"
+                      withImage={false}
+                    />
+                    <MenuPopoverMobile
+                      title="Aplikasi Polri"
+                      menus={siteConfig.humasMenuItems[4].submenu}
+                      placement="right"
+                      withImage={true}
+                    />
+                  </div>
+                </PopoverContent>
+              </Popover>
               <Link href={`https://eppid.polri.go.id/`}>
                 <Button className="bg-white dark:bg-stone-900" radius="sm">
                   <p className="font-bold w-full ">e-PPID Polri</p>
-                </Button>{" "}
+                </Button>
               </Link>
             </div>
             <Input
@@ -218,18 +397,5 @@ export default function BannerHumasNew() {
         </div>
       </div>
     </div>
-    // <div
-    //   className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg`}
-    //   style={{ backgroundImage: `url('/landing-3.jpg')` }}
-    // />
-    // <div
-    //   className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg relative`}
-    // >
-    //   <div
-    //     className="absolute inset-0 bg-black bg-opacity-100 bg-cover bg-center object-cover"
-    //     style={{ backgroundImage: `url('/landing-3.jpg')` }}
-    //   />
-    //   <div className="flex flex-row p-4">Your Text Here</div>
-    // </div>
   );
 }

components/layout/navbar/NavbarHumas.tsx

@@ -1337,7 +1337,7 @@ export default function NavbarHumas(props: { size: string }) {
                   language === "id" ? setLanguage("en") : setLanguage("id")
                 }
               >
-                {language === "id" ? <IdnIcon /> : <UKIcon />}
+                {language === "id" ? <IdnIcon size={24} /> : <UKIcon />}
               </a>
               <ThemeSwitch />
               <NavbarMenuToggle />

config/site.ts

@@ -34,74 +34,86 @@ export const siteConfig = {
         {
           label: "SP2HP",
           href: "https://sp2hp.bareskrim.polri.go.id/",
-          img: "at4.png",
+          img: "/at4.png",
           blank: true,
+          desc: " Pelayanan Surat Pemberitahuan Perkembangan Hasil Penyidikan Online",
         },
         {
           label: "Formulir Permohonan Informasi",
           href: "#",
-          img: "pm2.png",
+          img: "/pm2.png",
           blank: false,
+          desc: "Pelayanan Permohonan Formulir Informasi",
         },
         {
           label: "Pelayanan SIM",
           href: "https://www.digitalkorlantas.id/sim/",
-          img: "pm3.png",
+          img: "/pm3.png",
           blank: true,
+          desc: "Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM Berbasis Online",
         },
         {
           label: "Pelayanan e-Rikkes SIM",
           href: "https://erikkes.id/",
-          img: "pm4.png",
+          img: "/pm4.png",
           blank: true,
+          desc: "Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi Berbasis Online Dalam Proses Penerbitan SIM",
         },
         {
           label: "Pelayanan Test Psikologi SIM",
           href: "https://eppsi.id/",
-          img: "pm5.png",
+          img: "/pm5.png",
           blank: true,
+          desc: "Pelayanan Pembuatan Test Psikologi SIM Berbasis Online",
         },
         {
           label: "Pelayanan e-Avis",
           href: "https://e-avis.korlantas.polri.go.id/",
-          img: "pm6.png",
+          img: "/pm6.png",
           blank: true,
+          desc: "Pelayanan Ujian Teori SIM Berbasis Online",
         },
         {
           label: "Pelayanan Samsat Digital",
           href: "https://samsatdigital.id/",
-          img: "pm7.png",
+          img: "/pm7.png",
           blank: true,
+          desc: "Pelayanan Samsat Berbasis Online",
         },
         {
           label: "Pelayanan SKCK",
           href: "https://skck.polri.go.id/",
-          img: "pm8.png",
+          img: "/pm8.png",
           blank: true,
+          desc: "Pelayanan Pembuatan SKCK Berbasis Online",
         },
         {
           label: "Pelayanan Propam Presisi",
           href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam&pli=1",
-          img: "pm9.png",
+          img: "/pm9.png",
           blank: true,
+          desc: "Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu Kejadian atau Kejahatan",
         },
         {
           label: "Pelayanan Dumas Presisi",
           href: "https://dumaspresisi.polri.go.id/",
-          img: "pm10.png",
+          img: "/pm10.png",
           blank: true,
+          desc: "Layanan Pengaduan Masyarakat Terintegrasi Berbasis Online",
         },
         {
           label: "Pelayanan Binmas",
           href: "https://bos.polri.go.id/login",
-          img: "pm11.png",
+          img: "/pm11.png",
           blank: true,
+          desc: "Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas",
         },
         {
           label: "Clean & Clear Polri",
           href: "#",
-          img: "pm12.png",
+          img: "/pm12.png",
           blank: true,
+          desc: " Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan Anggota POLRI",
         },
       ],
     },
@@ -200,116 +212,135 @@ export const siteConfig = {
         {
           label: "Polri Super App",
           href: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
-          img: "at1.png",
+          img: "/at1.png",
           blank: true,
+          desc: "Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK, Pengaduan Masyarakat",
         },
         {
           label: "Media Hub",
           href: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
-          img: "at2.png",
+          img: "/at2.png",
           blank: true,
+          desc: "Humas Polri dalam Data",
         },
         {
           label: "Polisiku",
           href: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
-          img: "at3.png",
+          img: "/at3.png",
           blank: true,
+          desc: "Membantu anggota Kepolisian untuk mengindetifikasi masalah di lapangan",
         },
         {
           label: "SP2HP",
           href: "https://sp2hp.bareskrim.polri.go.id/",
-          img: "at4.png",
+          img: "/at4.png",
           blank: true,
+          desc: "Surat Pemberitahuan Perkembangan Hasil Penyidikan Online",
         },
         {
           label: "Polri TV",
           href: "https://play.google.com/store/apps/details?id=com.polritv",
-          img: "at5.png",
+          img: "/at5.png",
           blank: true,
+          desc: "Humas Polri dalam Audio Visual",
         },
         {
           label: "Polri Radio",
           href: "https://play.google.com/store/apps/details?id=com.polritv",
-          img: "at6.png",
+          img: "/at6.png",
           blank: true,
+          desc: "Humas Polri dalam Audio",
         },
         {
           label: "e-Avis",
           href: "https://e-avis.korlantas.polri.go.id/",
-          img: "pm6.png",
+          img: "/pm6.png",
           blank: true,
+          desc: "Platform Ujian Teori SIM",
         },
         {
           label: "e-Rikkes",
           href: "https://erikkes.id/",
-          img: "pm4.png",
+          img: "/pm4.png",
           blank: true,
+          desc: " Pemeriksaan Kesehatan Berbassi Teknologi Secara Online dalam Proses Penerbitan SIM",
         },
         {
           label: "e-PPSI",
           href: "https://eppsi.id/",
-          img: "pm5.png",
+          img: "/pm5.png",
           blank: true,
+          desc: "Tes Psikologis SIM Secara Online",
         },
         {
           label: "BOS",
           href: "https://bos.polri.go.id/login",
-          img: "pm11.png",
+          img: "/pm11.png",
           blank: true,
+          desc: "Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas",
         },
         {
           label: "Signal",
           href: "https://play.google.com/store/apps/details?id=app.signal.id",
-          img: "pm7.png",
+          img: "/pm7.png",
           blank: true,
+          desc: "Aplikasi Samsat Digital Nasional",
         },
         {
           label: "SKCK Online",
           href: "https://skck.polri.go.id/",
-          img: "pm8.png",
+          img: "/pm8.png",
           blank: true,
+          desc: "Aplikasi Pembuatan SKCK Secara Online",
         },
         {
           label: "Propam Presisi",
           href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
-          img: "pm9.png",
+          img: "/pm9.png",
           blank: true,
+          desc: "Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah",
         },
         {
           label: "Monitoring Presisi",
           href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
-          img: "at14.png",
+          img: "/at14.png",
           blank: true,
+          desc: "Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya Melaporkan Tugas",
         },
         {
           label: "SDM - Penerimaan POLRI",
           href: "https://penerimaan.polri.go.id/",
-          img: "at15.png",
+          img: "/at15.png",
           blank: true,
+          desc: "Website untuk Memonitoring Penerimaan Anggota POLRI",
         },
         {
           label: "Whistle Blowing System",
           href: "https://pengaduan-penerimaan.polri.go.id/",
-          img: "at16.png",
+          img: "/at16.png",
           blank: true,
+          desc: "Website untuk Pengaduan Penerimaan Anggota POLRI",
         },
         {
           label: "Dumas Presisi",
           href: "https://play.google.com/store/apps/details?id=com.admasolusi.monitoringpresisi",
-          img: "pm10.png",
+          img: "/pm10.png",
           blank: true,
+          desc: "Website Layanan Pengaduan Masyarakat Terintegrasi",
         },
         {
           label: "Clean & Clear Polri",
           href: "#",
-          img: "pm12.png",
+          img: "/pm12.png",
           blank: true,
+          desc: "Aplikasi untuk Memonitoring Penerimaan Angota POLRI",
         },
         {
           label: "Sinar",
           href: "https://www.digitalkorlantas.id/sim/",
-          img: "pm3.png",
+          img: "/pm3.png",
           blank: true,
+          desc: " Aplikasi dan Website Pelayanan Pendaftaran dan Perpanjangan SIM",
         },
       ],
     },