224 lines
9.7 KiB
TypeScript
224 lines
9.7 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { Search, LogIn, Menu, X, Moon, Sun } from "lucide-react";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuList,
|
|
NavigationMenuItem,
|
|
} from "@/components/ui/navigation-menu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Link, router, usePage } from "@inertiajs/react";
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer";
|
|
import RunningText from "./RunningText";
|
|
import { useTheme } from "next-themes";
|
|
import SearchDialog from "./SearchDialog";
|
|
import { Post } from "../DetailArtikel/types";
|
|
import { PageProps as InertiaPageProps } from "@inertiajs/core";
|
|
|
|
interface NavItemsProps {
|
|
mobile?: boolean;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
interface CustomPageProps extends InertiaPageProps {
|
|
runPosts?: Post[];
|
|
errors: Record<string, string>;
|
|
}
|
|
|
|
const Navbar = () => {
|
|
const { runPosts = [] } = usePage<CustomPageProps>().props;
|
|
// const runPosts = props.runPosts || [];
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
|
|
// const [searchQuery, setSearchQuery] = useState("");
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
// Handle scroll effect
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollPosition = window.scrollY;
|
|
setIsScrolled(scrollPosition > 50);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(theme === "light" ? "dark" : "light");
|
|
};
|
|
|
|
const NavItems: React.FC<NavItemsProps> = ({ mobile = false, onClose }) => (
|
|
<>
|
|
<NavigationMenuItem>
|
|
<Link
|
|
href={`/`}
|
|
onClick={mobile && onClose ? onClose : undefined}
|
|
className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
|
|
mobile
|
|
? "flex w-full justify-center items-center mx-auto rounded-lg hover:bg-green-700"
|
|
: "rounded-full hover:bg-green-800"
|
|
}`}
|
|
>
|
|
HOME
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
{["PENGUMUMAN", "UNDANGAN", "PERATURAN"].map((item) => (
|
|
<NavigationMenuItem key={item}>
|
|
<Link
|
|
href={`/${item.toLowerCase()}`}
|
|
onClick={mobile && onClose ? onClose : undefined}
|
|
className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
|
|
mobile
|
|
? "w-full justify-center items-center rounded-lg hover:bg-green-700"
|
|
: "rounded-full hover:bg-green-800"
|
|
}`}
|
|
>
|
|
{item}
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
))}
|
|
{/* <NavigationMenuItem>
|
|
<form onSubmit={handleSearch} className="flex items-center">
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className={`bg-white text-black px-3 py-2 rounded-l-full focus:outline-none w-full ${
|
|
mobile ? "w-32" : "w-40"
|
|
}`}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="ghost"
|
|
className="bg-green-700 hover:bg-green-600 text-white rounded-r-full p-2"
|
|
>
|
|
<Search className="h-4 w-4 text-white" />
|
|
</Button>
|
|
</form>
|
|
</NavigationMenuItem> */}
|
|
<NavigationMenuItem>
|
|
<SearchDialog />
|
|
</NavigationMenuItem>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<RunningText posts={runPosts} />
|
|
|
|
<div
|
|
className={`w-full rounded-br-2xl rounded-bl-2xl text-white transition-all duration-300 ${
|
|
isScrolled
|
|
? "fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-[#dcfce7]/80 shadow-lg"
|
|
: "relative bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="container max-w-7xl mx-auto">
|
|
<div className="flex items-center justify-between md:justify-center w-full gap-4 md:gap-8 p-4">
|
|
<Link
|
|
href="/"
|
|
className="transition-transform duration-200 hover:scale-105"
|
|
>
|
|
<img
|
|
src="/assets/logo_skl.svg"
|
|
alt="Logo"
|
|
className="w-12 h-12 md:w-16 md:h-16"
|
|
/>
|
|
</Link>
|
|
|
|
<NavigationMenu className="bg-green-800/90 rounded-full hidden md:block backdrop-blur-sm">
|
|
<NavigationMenuList className="space-x-6">
|
|
<NavItems />
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
|
|
<div className="md:hidden flex items-center gap-3">
|
|
<Link
|
|
href="/login"
|
|
className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-3 py-2 rounded-full text-sm"
|
|
>
|
|
<LogIn className="mr-2 h-4 w-4" /> Login
|
|
</Link>
|
|
<Drawer
|
|
open={isDrawerOpen}
|
|
onOpenChange={setIsDrawerOpen}
|
|
>
|
|
<DrawerTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="bg-green-800/90 hover:bg-green-700 text-white p-2 rounded-full"
|
|
>
|
|
{isDrawerOpen ? (
|
|
<X className="h-6 w-6" />
|
|
) : (
|
|
<Menu className="h-6 w-6" />
|
|
)}
|
|
</Button>
|
|
</DrawerTrigger>
|
|
<DrawerContent className="bg-green-800/95 backdrop-blur-lg border-none">
|
|
<DrawerHeader>
|
|
<DrawerTitle className="text-white text-2xl text-center font-bold">
|
|
Menu
|
|
</DrawerTitle>
|
|
</DrawerHeader>
|
|
<div className="mt-4 px-4 flex justify-center">
|
|
<NavigationMenu className="w-full">
|
|
<NavigationMenuList className="flex flex-col items-center space-y-4">
|
|
<NavItems
|
|
mobile
|
|
onClose={() =>
|
|
setIsDrawerOpen(false)
|
|
}
|
|
/>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
<DrawerClose asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="absolute top-4 right-4 rounded-full p-2 text-white hover:bg-green-700"
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</Button>
|
|
</DrawerClose>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</div>
|
|
|
|
{/* <Button
|
|
variant="ghost"
|
|
onClick={toggleTheme}
|
|
className="p-3 bg-[#2d7448] hover:bg-[#16a34a] rounded-full text-white "
|
|
>
|
|
{theme === "light" ? (
|
|
<Moon className="h-6 w-6" />
|
|
) : (
|
|
<Sun className="h-6 w-6" />
|
|
)}
|
|
</Button> */}
|
|
|
|
<div className="hidden md:block">
|
|
<Link
|
|
href="/login"
|
|
className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-4 py-2 rounded-full"
|
|
>
|
|
<LogIn className="mr-2 h-4 w-4" /> LOGIN
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|