fix: humas navbar mobile
This commit is contained in:
amd123
parent
fa775d4f24
commit
59d42ec772
|
|
@ -1,20 +1,39 @@
|
|||
'use client'
|
||||
import { siteConfig } from '@/config/site';
|
||||
import { Input } from '@nextui-org/input';
|
||||
import { Navbar, NavbarContent, NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle } from '@nextui-org/navbar';
|
||||
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger, autocomplete } from '@nextui-org/react';
|
||||
import Link from "next/link";
|
||||
import { ChevronDownIcon, ChevronRightIcon, ChevronRightWhite, ChevronUpIcon, FbIcon, IdnIcon, IgIcon, SearchIcon, TtIcon, TwIcon, YtIcon } from '../icons';
|
||||
import { ThemeSwitch } from '../theme-switch';
|
||||
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
|
||||
import Image from 'next/image';
|
||||
import { siteConfig } from '@/config/site';
|
||||
import Link from "next/link";
|
||||
import { useState } from 'react';
|
||||
import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, FbIcon, IdnIcon, IgIcon, SearchIcon, TtIcon, TwIcon, YtIcon } from '../icons';
|
||||
import { ThemeSwitch } from '../theme-switch';
|
||||
|
||||
interface MenuItem {
|
||||
key: string;
|
||||
label: string;
|
||||
href: URL;
|
||||
submenu?: SubMenuItem[];
|
||||
}
|
||||
|
||||
interface SubMenuItem {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface DropdownOpenState {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
|
||||
export default function NavbarHumas() {
|
||||
const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
|
||||
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
setDropdownOpen(!dropdownOpen);
|
||||
const toggleDropdown = (key: any) => {
|
||||
setDropdownOpen({
|
||||
...dropdownOpen,
|
||||
[key]: !dropdownOpen[key]
|
||||
});
|
||||
};
|
||||
|
||||
const searchInput = (
|
||||
|
|
@ -249,34 +268,38 @@ export default function NavbarHumas() {
|
|||
<NavbarMenu>
|
||||
{/* {searchInput} */}
|
||||
<div className="mt-1 flex flex-col gap-1">
|
||||
{siteConfig.humasMenuItems.map((item, index) => (
|
||||
<NavbarMenuItem key={`${item}-${index}`}>
|
||||
{item.submenu ? (
|
||||
<div>
|
||||
<button onClick={toggleDropdown} className="flex items-center gap-2">
|
||||
{siteConfig.humasMenuItems.map((item) => (
|
||||
<div key={item.key} className="relative">
|
||||
<NavbarMenuItem>
|
||||
<div onClick={() => toggleDropdown(item.key)} className='flex items-end gap-2'>
|
||||
{item.href ? (
|
||||
<Link href={item.href} target='_blank'>
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span>{item.label}</span>
|
||||
{dropdownOpen ? (
|
||||
)}
|
||||
{item.submenu && (
|
||||
dropdownOpen[item.key] ? (
|
||||
<ChevronUpIcon />
|
||||
) : (
|
||||
<ChevronDownIcon />
|
||||
)}
|
||||
</button>
|
||||
{dropdownOpen && (
|
||||
<div className="flex flex-col mt-1 ml-2 text-medium gap-1">
|
||||
{item.submenu.map((subItem, subIndex) => (
|
||||
<Link key={`${subItem}-${subIndex}`} href={subItem.href}>
|
||||
{subItem.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Link href={item.href} >
|
||||
{item.label}
|
||||
</Link>
|
||||
</NavbarMenuItem>
|
||||
{dropdownOpen[item.key] && item.submenu && (
|
||||
<div className='pl-2'>
|
||||
{item.submenu.map((subItem, subIndex) => (
|
||||
<div key={subIndex}>
|
||||
<Link href={subItem.href}>
|
||||
{subItem.label}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</NavbarMenuItem>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</NavbarMenu>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const siteConfig = {
|
|||
},
|
||||
{
|
||||
label: "Profile Pimpinan POLRI",
|
||||
href: "/visi-misi"
|
||||
href: "/profile-pimpinan-polri"
|
||||
},
|
||||
{
|
||||
label: "Struktur Organisasi",
|
||||
|
|
@ -76,43 +76,43 @@ export const siteConfig = {
|
|||
},
|
||||
{
|
||||
label: "Pelayanan SIM",
|
||||
href: "/visi-misi"
|
||||
href: "https://www.digitalkorlantas.id/sim/"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan e-Rikkes SIM",
|
||||
href: "/struktur-organisasi"
|
||||
href: "https://erikkes.id/"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan Tes Psikologi SIM",
|
||||
href: "/visi-misi"
|
||||
href: "https://eppsi.id/"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan e-Avis",
|
||||
href: "/tugas-dan-fungsi"
|
||||
href: "https://e-avis.korlantas.polri.go.id/"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan Samsat Digital",
|
||||
href: "#"
|
||||
href: "https://samsatdigital.id/"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan SKCK",
|
||||
href: "#"
|
||||
href: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan Propam Presisi",
|
||||
href: "#"
|
||||
href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan Dumas Presisi",
|
||||
href: "#"
|
||||
href: "https://dumaspresisi.polri.go.id/"
|
||||
},
|
||||
{
|
||||
label: "Pelayanan Binmas",
|
||||
href: "#"
|
||||
href: "https://bos.polri.go.id/login"
|
||||
},
|
||||
{
|
||||
label: "Wistle Blower System",
|
||||
href: "#"
|
||||
href: "https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2"
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue