fix:navbar desktop

This commit is contained in:
Rama Priyanto 2024-12-16 18:31:59 +07:00
parent 6b0ee4cce5
commit be6a09a35a
4 changed files with 531 additions and 273 deletions

View File

@ -4,14 +4,14 @@ import React from "react";
export default function BannerHumas() {
const t = useTranslations("Banner");
return (
<div className="bg-white relative text-white">
<div className="h-fit relative text-white mt-[-130px]">
<img
src="headerbanner1.png"
alt="humasbanner"
className="w-full relative bottom-0 md:bottom-10"
className="w-full relative"
/>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full md:w-[75%]">
<p className="text-sm lg:text-4xl font-bold pb-1 md:pb-5">
<p className="text-sm lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
{t("jumbotron")}
</p>
<p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>

View File

@ -56,6 +56,7 @@ interface DropdownOpenState {
export default function NavbarHumas() {
const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
const [isOpen, setIsOpen] = useState(false);
const router = useRouter();
const t = useTranslations("Navbar");
const token = Cookies.get("access_token");
@ -86,13 +87,13 @@ export default function NavbarHumas() {
const searchInput = (
<Input
aria-label="Search"
aria-label="search"
classNames={{
inputWrapper: "bg-default-100",
input: "text-sm",
}}
labelPlacement="outside"
placeholder="Search..."
placeholder={t("search")}
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
@ -104,22 +105,12 @@ export default function NavbarHumas() {
isBordered
maxWidth="full"
height="8rem"
className="dark:bg-[#1F1A17]"
className="backdrop-opacity-10"
classNames={{ wrapper: "px-0" }}
>
<div className="w-full h-full flex">
<div className="min-w-max md:w-1/12 flex items-center justify-center">
<Link href={"/"}>
<Image
height={100}
width={100}
src="/logohumas.png"
alt="logo"
className="min-w-max"
/>
</Link>
</div>
<div className="w-auto md:w-11/12 hidden md:flex flex-col justify-cente pt-3 space-y-3">
<div className="flex items-center justify-end gap-1 md:gap-5">
<div className="w-full hidden md:flex flex-col pt-3">
<div className="flex items-center justify-end gap-1 md:gap-5 px-[50px]">
<div className="flex gap-1 lg:gap-3 items-center">
<Link
href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
@ -148,113 +139,61 @@ export default function NavbarHumas() {
>
<TtIcon />
</Link>
</div>
<a
className="cursor-pointer"
onClick={() =>
language === "id" ? setLanguage("en") : setLanguage("id")
}
>
{language === "id" ? <IdnIcon /> : <UKIcon />}
</a>
</div>
<div className="flex flex-wrap items-center justify-around ">
<Link href={"/"}>
<div>{t("beranda")}</div>
</Link>
<div>
<Dropdown className=" dark:bg-[#1F1A17]">
<NavbarItem>
{token ? (
// <Button className="bg-[#DD8306]" onPress={onLogout}>
// Logout
// </Button>
<Dropdown>
<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" />}
>
{t("tentang")}
</Button>
<Button variant="bordered">Menu</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
// aria-label="tentang"
title={t("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]",
}}
<DropdownMenu aria-label="Static Actions">
<DropdownItem
key="dashboard"
onPress={() => router.push("/admin/dashboard")}
>
<DropdownItem>
<Link
href="/static/humas-polri"
className="flex justify-between"
>
{t("tentang")} Humas POLRI
<ChevronRightIcon />
</Link>
Dashboard
</DropdownItem>
<DropdownItem>
<Link
href="/static/profile-kapolri"
className="flex justify-between"
<DropdownItem key="dashboard">Profile</DropdownItem>
<DropdownItem
key="logout"
className="text-danger"
color="danger"
onPress={onLogout}
>
{t("profilPimpinan")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/struktur-mabes"
className="flex justify-between"
>
{t("strukturOrganisasi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/visi-misi-polri"
className="flex justify-between"
>
{t("visi")} & {t("misi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/tugas-dan-fungsi-polri"
className="flex justify-between"
>
{t("tugas")} & {t("fungsi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link href="/static/logo" className="flex justify-between">
Logo
<ChevronRightIcon />
</Link>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div>
{/* <Link href="http://103.82.242.92:5555/" target="_blank">
Portal PPID
</Link> */}
<Link href="http://siberpresisi.com/" target="_blank">
Portal PPID
) : (
<Link href="/auth">
<Button
variant="bordered"
className="font-bold text-black border-black dark:border-white dark:text-white px-0 pl-2 rounded-md py-0"
endContent={<ChevronRightIcon />}
>
{t("masuk")}
</Button>
</Link>
)}
</div>
<div>
<Dropdown className="dark:bg-[#1F1A17]">
</div>
<div
className={`flex flex-wrap items-center justify-between px-[50px] ${
isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
}`}
>
<Link href={"/"}>
<img src="/logohumas.png" alt="logo" className="w-[75px]" />
</Link>
<Dropdown
className="bg-white dark:bg-[#1F1A17] "
radius="none"
classNames={{ base: "shadow-none" }}
onOpenChange={(state) => setIsOpen(state)}
>
<NavbarItem>
<DropdownTrigger>
<Button
@ -390,47 +329,356 @@ export default function NavbarHumas() {
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div>
<Link href={"/kontak-kami"}>{t("kontak")}</Link>
</div>
<div className="flex items-center gap-3">
<div className="hidden lg:block">{searchInput}</div>
<div>
<ThemeSwitch />
</div>
{token ? (
// <Button className="bg-[#DD8306]" onPress={onLogout}>
// Logout
// </Button>
<Dropdown>
<Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}
>
<NavbarItem>
<DropdownTrigger>
<Button variant="bordered">Menu</Button>
<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" />}
>
{t("informasi_publik")}
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Static Actions">
<DropdownItem
key="dashboard"
onPress={() => router.push("/admin/dashboard")}
</NavbarItem>
<DropdownMenu
// aria-label="tentang"
title={t("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]",
}}
>
Dashboard
<DropdownItem>
<Link
href="/static/humas-polri"
className="flex justify-between"
>
{t("tentang")} Humas POLRI
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key="dashboard">Profile</DropdownItem>
<DropdownItem
key="logout"
className="text-danger"
color="danger"
onPress={onLogout}
<DropdownItem>
<Link
href="/static/profile-kapolri"
className="flex justify-between"
>
Logout
{t("profilPimpinan")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/struktur-mabes"
className="flex justify-between"
>
{t("strukturOrganisasi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/visi-misi-polri"
className="flex justify-between"
>
{t("visi")} & {t("misi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/tugas-dan-fungsi-polri"
className="flex justify-between"
>
{t("tugas")} & {t("fungsi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link href="/static/logo" className="flex justify-between">
Logo
<ChevronRightIcon />
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
) : (
<Link href="/auth">
<Button className="bg-[#DD8306] text-white">Login</Button>
<Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}
>
<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" />}
>
{t("publikasi")}
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
// aria-label="tentang"
title={t("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>
<Link
href="/static/humas-polri"
className="flex justify-between"
>
{t("tentang")} Humas POLRI
<ChevronRightIcon />
</Link>
)}
</DropdownItem>
<DropdownItem>
<Link
href="/static/profile-kapolri"
className="flex justify-between"
>
{t("profilPimpinan")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/struktur-mabes"
className="flex justify-between"
>
{t("strukturOrganisasi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/visi-misi-polri"
className="flex justify-between"
>
{t("visi")} & {t("misi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/tugas-dan-fungsi-polri"
className="flex justify-between"
>
{t("tugas")} & {t("fungsi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link href="/static/logo" className="flex justify-between">
Logo
<ChevronRightIcon />
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}
>
<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" />}
>
{t("tentang")}
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
// aria-label="tentang"
title={t("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>
<Link
href="/static/humas-polri"
className="flex justify-between"
>
{t("tentang")} Humas POLRI
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/profile-kapolri"
className="flex justify-between"
>
{t("profilPimpinan")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/struktur-mabes"
className="flex justify-between"
>
{t("strukturOrganisasi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/visi-misi-polri"
className="flex justify-between"
>
{t("visi")} & {t("misi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/tugas-dan-fungsi-polri"
className="flex justify-between"
>
{t("tugas")} & {t("fungsi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link href="/static/logo" className="flex justify-between">
Logo
<ChevronRightIcon />
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}
>
<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" />}
>
{t("aplikasi_terkait")}
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
// aria-label="tentang"
title={t("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>
<Link
href="/static/humas-polri"
className="flex justify-between"
>
{t("tentang")} Humas POLRI
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/profile-kapolri"
className="flex justify-between"
>
{t("profilPimpinan")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/struktur-mabes"
className="flex justify-between"
>
{t("strukturOrganisasi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/visi-misi-polri"
className="flex justify-between"
>
{t("visi")} & {t("misi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link
href="/static/tugas-dan-fungsi-polri"
className="flex justify-between"
>
{t("tugas")} & {t("fungsi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem>
<Link href="/static/logo" className="flex justify-between">
Logo
<ChevronRightIcon />
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<div className="flex items-center gap-3">
<div className="hidden lg:block">{searchInput}</div>
<a
className="cursor-pointer"
onClick={() =>
language === "id" ? setLanguage("en") : setLanguage("id")
}
>
{language === "id" ? <IdnIcon /> : <UKIcon />}
</a>
<div>
<ThemeSwitch />
</div>
</div>
</div>
</div>

View File

@ -9,7 +9,12 @@
"strukturOrganisasi": "Organizational Structure",
"profilPimpinan": "Profile of The Police Leader",
"tugas": "Duties",
"fungsi": "Functions"
"fungsi": "Functions",
"aplikasi_terkait": "Related Apps",
"publikasi": "Publication",
"informasi_publik": "Public Information",
"search": "Search...",
"masuk": "Login"
},
"Banner": {
"jumbotron": "TRANSPARENCY, PARTICIPATION, AND THE BEST SERVICES FROM POLRI FOR INDONESIA",

View File

@ -9,7 +9,12 @@
"strukturOrganisasi": "Struktur Organisasi",
"profilPimpinan": "Profil Pimpinan Polri",
"tugas": "Tugas",
"fungsi": "Fungsi"
"fungsi": "Fungsi",
"aplikasi_terkait": "Aplikasi Terkait",
"publikasi": "Publikasi",
"informasi_publik": "Informasi Publik",
"search": "Pencarian...",
"masuk": "Masuk"
},
"Banner": {
"jumbotron": "TRANSPARANSI, PATISIPASI, DAN LAYANAN TERBAIK DARI POLRI UNTUK INDONESIA",