feat: add navbarhumas
This commit is contained in:
amd123
parent
74cc52cb55
commit
c0499d3af0
|
|
@ -9,6 +9,7 @@ import { Metadata } from "next";
|
||||||
import { Providers } from "./providers";
|
import { Providers } from "./providers";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { PPIDLayout } from "@/components/layout/ppid-layout";
|
import { PPIDLayout } from "@/components/layout/ppid-layout";
|
||||||
|
import NavbarHumas from "@/components/navbar/NavbarHumas";
|
||||||
|
|
||||||
// export const metadata: Metadata = {
|
// export const metadata: Metadata = {
|
||||||
// title: {
|
// title: {
|
||||||
|
|
@ -47,7 +48,7 @@ export default function RootLayout({
|
||||||
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
|
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
|
||||||
{pathname === "/" ? (
|
{pathname === "/" ? (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Navbar />
|
<NavbarHumas />
|
||||||
<section className="md:absolute md:top-0 w-full ">
|
<section className="md:absolute md:top-0 w-full ">
|
||||||
<img
|
<img
|
||||||
alt="banner"
|
alt="banner"
|
||||||
|
|
|
||||||
|
|
@ -375,6 +375,29 @@ export const YtIcon = ({
|
||||||
</svg>
|
</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 = ({
|
export const TwIcon = ({
|
||||||
size,
|
size,
|
||||||
height = 24,
|
height = 24,
|
||||||
|
|
|
||||||
|
|
@ -523,179 +523,13 @@ export const Navbar = () => {
|
||||||
aria-label="pelayanan-masyarakat"
|
aria-label="pelayanan-masyarakat"
|
||||||
className=""
|
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>
|
||||||
<DropdownItem
|
<Link href="/about">
|
||||||
key="sp2hp"
|
test
|
||||||
>
|
</Link>
|
||||||
<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>
|
||||||
<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>
|
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 509 B |
Loading…
Reference in New Issue