web-humas-fe/components/navbar.tsx

import { Input } from "@nextui-org/input";
import { Kbd } from "@nextui-org/kbd";
import { Link } from "@nextui-org/link";
import {
	NavbarBrand,
	NavbarContent,
	NavbarItem,
	NavbarMenu,
	NavbarMenuItem,
	NavbarMenuToggle,
	Navbar as NextUINavbar
} from "@nextui-org/navbar";



import {
	ChevronDownIcon,
	FbIcon,
	IgIcon,
	SearchIcon,
	TtIcon,
	TwIcon,
	YtIcon
} from "@/components/icons";
import { ThemeSwitch } from "@/components/theme-switch";

import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Image } from "@nextui-org/react";
import { siteConfig } from "@/config/site";

export const Navbar = () => {
	const searchInput = (
		<Input
			aria-label="Search"
			classNames={{
				inputWrapper: "bg-default-100",
				input: "text-sm",
			}}
			endContent={
				<Kbd className="hidden lg:inline-block" keys={["command"]}>
					K
				</Kbd>
			}
			labelPlacement="outside"
			placeholder="Search..."
			startContent={
				<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
			}
			type="search"
		/>
	);

	return (
		<NextUINavbar className="h-28 md:h-36"
			classNames={{
				wrapper: "max-w-full h-[90%]",
			}}>
			<NavbarBrand className="min-w-max">
				<Image
					src="/logohumas.png"
				/>
			</NavbarBrand>
			<NavbarContent className="hidden md:flex   basis-3/5 gap-0 md:gap-4 lg:gap-12 px-auto lg:px-10" justify="center">
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Pelayanan Masyarakat</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem >
					<Link href="#" color="foreground">
						<p className="mr-1 font-semibold">Portal PPID</p>
					</Link>
				</NavbarItem>
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Publikasi</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Tentang</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Aplikasi Terkait</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem>
					<ThemeSwitch />
				</NavbarItem>
			</NavbarContent>
			<NavbarContent className="hidden sm:hidden md:hidden lg:flex basis-1/5  flex-col items-center ">
				<div className="flex gap-3">
					<div><FbIcon /></div>
					<div><IgIcon /></div>
					<div><YtIcon /></div>
					<div><TwIcon /></div>
					<div><TtIcon /></div>
				</div>
				<div className="font-bold">{searchInput}</div>
			</NavbarContent>

			<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
				<ThemeSwitch />
				<NavbarMenuToggle />
			</NavbarContent>

			<NavbarMenu>
				{/* {searchInput} */}
				<div className="mx-4 mt-2 flex flex-col gap-2 pt-10">
					{siteConfig.navMenuItems.map((item, index) => (
						<NavbarMenuItem key={`${item}-${index}`}>
							<Link
								href={item.href}
								size="lg"
							>
								{item.label}
							</Link>
						</NavbarMenuItem>
					))}
				</div>
			</NavbarMenu>
		</NextUINavbar>
	);
};