From c0499d3af09a6772008c03b4c465537efc23b8e6 Mon Sep 17 00:00:00 2001
From: amd123 <iam.ahmadsholeh@gmail.com>
Date: Tue, 6 Feb 2024 16:41:07 +0700
Subject: [PATCH] feat: add navbarhumas

---
 app/layout.tsx                    |   3 +-
 components/icons.tsx              |  23 ++++
 components/navbar.tsx             | 176 +-----------------------------
 components/navbar/NavbarHumas.tsx | 118 ++++++++++++++++++++
 public/temp/ficon.svg             |  13 +++
 5 files changed, 161 insertions(+), 172 deletions(-)
 create mode 100644 components/navbar/NavbarHumas.tsx
 create mode 100644 public/temp/ficon.svg

diff --git a/app/layout.tsx b/app/layout.tsx
index 8568df1..31e5357 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,7 @@ import { Metadata } from "next";
 import { Providers } from "./providers";
 import { usePathname } from "next/navigation";
 import { PPIDLayout } from "@/components/layout/ppid-layout";
+import NavbarHumas from "@/components/navbar/NavbarHumas";
 
 // export const metadata: Metadata = {
 // 	title: {
@@ -47,7 +48,7 @@ export default function RootLayout({
 				<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
 					{pathname === "/" ? (
 						<div className="relative">
-							<Navbar />
+							<NavbarHumas />
 							<section className="md:absolute md:top-0 w-full ">
 								<img
 									alt="banner"
diff --git a/components/icons.tsx b/components/icons.tsx
index 1092a5d..627c168 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -375,6 +375,29 @@ export const YtIcon = ({
 	</svg>
 );
 
+export const IdnIcon = ({
+	size,
+	height = 24,
+	width = 14,
+	fill = "currentColor",
+	...props
+}: IconSvgProps) => (
+	<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_699_602)">
+			<rect width="32" height="24" rx="6" fill="white" />
+			<rect width="32" height="12" fill="#DC1F26" />
+			<rect x="32" y="24" width="32" height="12" transform="rotate(-180 32 24)" fill="white" />
+		</g>
+		<rect x="0.5" y="0.5" width="31" height="23" rx="5.5" stroke="white" />
+		<defs>
+			<clipPath id="clip0_699_602">
+				<rect width="32" height="24" rx="6" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+
+);
+
 export const TwIcon = ({
 	size,
 	height = 24,
diff --git a/components/navbar.tsx b/components/navbar.tsx
index c902f48..31a46bf 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -523,179 +523,13 @@ export const Navbar = () => {
 								aria-label="pelayanan-masyarakat"
 								className=""
 							>
-								<DropdownSection classNames={{
-									group: "flex flex-row",
-									base: "",
 
-								}}>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem><DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-								</DropdownSection>
-								<DropdownSection classNames={{
-									group: "flex flex-row",
-									base: "",
 
-								}}>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-								</DropdownSection>
-								<DropdownSection classNames={{
-									group: "flex flex-row",
-									base: "",
-
-								}}>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-									<DropdownItem
-										key="sp2hp"
-									>
-										<div className="flex items-center w-[350px]">
-											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
-											<div className="text-xs pl-2">
-												<div>SP2HP</div>
-												<div className="truncate max-w-min">
-													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
-												</div>
-											</div>
-										</div>
-									</DropdownItem>
-								</DropdownSection>
+								<DropdownItem>
+									<Link href="/about">
+										test
+									</Link>
+								</DropdownItem>
 							</DropdownMenu>
 						</Dropdown>
 					</div>
diff --git a/components/navbar/NavbarHumas.tsx b/components/navbar/NavbarHumas.tsx
new file mode 100644
index 0000000..d385098
--- /dev/null
+++ b/components/navbar/NavbarHumas.tsx
@@ -0,0 +1,118 @@
+import { Input } from '@nextui-org/input';
+import { Navbar, NavbarContent, NavbarItem, NavbarMenuToggle } from '@nextui-org/navbar';
+import { ChevronDownIcon, ChevronRightWhite, FbIcon, IdnIcon, IgIcon, SearchIcon, TtIcon, TwIcon, YtIcon } from '../icons';
+import { ThemeSwitch } from '../theme-switch';
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger } from '@nextui-org/react';
+
+export default function NavbarHumas() {
+
+
+    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' isBlurred={true} className='h-28 md:h-36'>
+            <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'>
+                    <div>Beranda</div>
+                    <div>
+                        <Dropdown>
+                            <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 />}
+                                >
+                                    Tentang Humas POLRI
+                                </DropdownItem>
+                                <DropdownItem
+                                    endContent={<ChevronRightWhite />}
+                                >
+                                    Profile Pimpinan POLRI
+                                </DropdownItem>
+                                <DropdownItem
+                                    endContent={<ChevronRightWhite />}>
+                                    Struktur Organisasi
+                                </DropdownItem>
+                                <DropdownItem
+                                    endContent={<ChevronRightWhite />}>
+                                    Visi & Misi
+                                </DropdownItem>
+                                <DropdownItem
+                                    endContent={<ChevronRightWhite />}>
+                                    Tugas & Fungsi
+                                </DropdownItem>
+                                <DropdownItem
+                                    endContent={<ChevronRightWhite />}>
+                                    Logo
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </div>
+                    <div>Portal PPID</div>
+                    <div>Pelayanan Masyarakat</div>
+                    <div>Kontak</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">
+                        <div><FbIcon /></div>
+                        <div><IgIcon /></div>
+                        <div><YtIcon /></div>
+                        <div><TwIcon /></div>
+                        <div><TtIcon /></div>
+                    </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>
+    )
+}
diff --git a/public/temp/ficon.svg b/public/temp/ficon.svg
new file mode 100644
index 0000000..721c8e7
--- /dev/null
+++ b/public/temp/ficon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_699_602)">
+<rect width="32" height="24" rx="6" fill="white"/>
+<rect width="32" height="12" fill="#DC1F26"/>
+<rect x="32" y="24" width="32" height="12" transform="rotate(-180 32 24)" fill="white"/>
+</g>
+<rect x="0.5" y="0.5" width="31" height="23" rx="5.5" stroke="white"/>
+<defs>
+<clipPath id="clip0_699_602">
+<rect width="32" height="24" rx="6" fill="white"/>
+</clipPath>
+</defs>
+</svg>