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

feat: add navbarhumas

This commit is contained in:
amd123 2024-02-06 16:41:07 +07:00
parent 74cc52cb55
commit c0499d3af0
5 changed files with 161 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/layout.tsx
View File

@ -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"

23
components/icons.tsx
View File

@ -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,

176
components/navbar.tsx
View File

@ -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>

118
components/navbar/NavbarHumas.tsx Normal file
View File

@ -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>
)
}

13
public/temp/ficon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 509 B