humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: humas navbar mobile

This commit is contained in:
amd123 2024-04-02 10:49:47 +07:00
parent fa775d4f24
commit 59d42ec772
2 changed files with 64 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
components/navbar/NavbarHumas.tsx
View File

@ -1,20 +1,39 @@
'use client' 'use client'
import { siteConfig } from '@/config/site';
import { Input } from '@nextui-org/input'; import { Input } from '@nextui-org/input';
import { Navbar, NavbarContent, NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle } from '@nextui-org/navbar'; import { Navbar, NavbarContent, NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle } from '@nextui-org/navbar';
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger, autocomplete } from '@nextui-org/react'; import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } 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 Image from 'next/image'; import Image from 'next/image';
import { siteConfig } from '@/config/site'; import Link from "next/link";
import { useState } from 'react'; 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() { export default function NavbarHumas() {
const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
const [dropdownOpen, setDropdownOpen] = useState(false); const toggleDropdown = (key: any) => {
setDropdownOpen({
const toggleDropdown = () => { ...dropdownOpen,
setDropdownOpen(!dropdownOpen); [key]: !dropdownOpen[key]
});
}; };
const searchInput = ( const searchInput = (
@ -249,34 +268,38 @@ export default function NavbarHumas() {
<NavbarMenu> <NavbarMenu>
{/* {searchInput} */} {/* {searchInput} */}
<div className="mt-1 flex flex-col gap-1"> <div className="mt-1 flex flex-col gap-1">
{siteConfig.humasMenuItems.map((item, index) => ( {siteConfig.humasMenuItems.map((item) => (
<NavbarMenuItem key={`${item}-${index}`}> <div key={item.key} className="relative">
{item.submenu ? ( <NavbarMenuItem>
<div> <div onClick={() => toggleDropdown(item.key)} className='flex items-end gap-2'>
<button onClick={toggleDropdown} className="flex items-center gap-2"> {item.href ? (
<Link href={item.href} target='_blank'>
<span>{item.label}</span>
</Link>
) : (
<span>{item.label}</span> <span>{item.label}</span>
{dropdownOpen ? ( )}
{item.submenu && (
dropdownOpen[item.key] ? (
<ChevronUpIcon /> <ChevronUpIcon />
) : ( ) : (
<ChevronDownIcon /> <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> </div>
) : ( </NavbarMenuItem>
<Link href={item.href} > {dropdownOpen[item.key] && item.submenu && (
{item.label} <div className='pl-2'>
</Link> {item.submenu.map((subItem, subIndex) => (
<div key={subIndex}>
<Link href={subItem.href}>
{subItem.label}
</Link>
</div>
))}
</div>
)} )}
</NavbarMenuItem> </div>
))} ))}
</div> </div>
</NavbarMenu> </NavbarMenu>

22
config/site.ts
View File

@ -41,7 +41,7 @@ export const siteConfig = {
}, },
{ {
label: "Profile Pimpinan POLRI", label: "Profile Pimpinan POLRI",
href: "/visi-misi" href: "/profile-pimpinan-polri"
}, },
{ {
label: "Struktur Organisasi", label: "Struktur Organisasi",
@ -76,43 +76,43 @@ export const siteConfig = {
}, },
{ {
label: "Pelayanan SIM", label: "Pelayanan SIM",
href: "/visi-misi" href: "https://www.digitalkorlantas.id/sim/"
}, },
{ {
label: "Pelayanan e-Rikkes SIM", label: "Pelayanan e-Rikkes SIM",
href: "/struktur-organisasi" href: "https://erikkes.id/"
}, },
{ {
label: "Pelayanan Tes Psikologi SIM", label: "Pelayanan Tes Psikologi SIM",
href: "/visi-misi" href: "https://eppsi.id/"
}, },
{ {
label: "Pelayanan e-Avis", label: "Pelayanan e-Avis",
href: "/tugas-dan-fungsi" href: "https://e-avis.korlantas.polri.go.id/"
}, },
{ {
label: "Pelayanan Samsat Digital", label: "Pelayanan Samsat Digital",
href: "#" href: "https://samsatdigital.id/"
}, },
{ {
label: "Pelayanan SKCK", label: "Pelayanan SKCK",
href: "#" href: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US"
}, },
{ {
label: "Pelayanan Propam Presisi", label: "Pelayanan Propam Presisi",
href: "#" href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
}, },
{ {
label: "Pelayanan Dumas Presisi", label: "Pelayanan Dumas Presisi",
href: "#" href: "https://dumaspresisi.polri.go.id/"
}, },
{ {
label: "Pelayanan Binmas", label: "Pelayanan Binmas",
href: "#" href: "https://bos.polri.go.id/login"
}, },
{ {
label: "Wistle Blower System", label: "Wistle Blower System",
href: "#" href: "https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2"
}, },
] ]
}, },