skl/resources/js/components/Partials/Navbar.tsx

import React, { useState, useEffect } from "react";
import {
    Search,
    LogIn,
    Menu,
    X,
    Moon,
    Sun,
    Home,
    Bell,
    FileText,
    BookOpen,
} 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 [isScrolled, setIsScrolled] = useState(false);
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
    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 menuItems = [
        { title: "HOME", icon: <Home className="h-4 w-4 mr-2" />, href: "/" },
        {
            title: "PENGUMUMAN",
            icon: <Bell className="h-4 w-4 mr-2" />,
            href: "/pengumuman",
        },
        {
            title: "UNDANGAN",
            icon: <FileText className="h-4 w-4 mr-2" />,
            href: "/undangan",
        },
        {
            title: "PERATURAN",
            icon: <BookOpen className="h-4 w-4 mr-2" />,
            href: "/peraturan",
        },
    ];

    const NavItems: React.FC<NavItemsProps> = ({ mobile = false, onClose }) => (
        <>
            {menuItems.map((item) => (
                <NavigationMenuItem key={item.title}>
                    <Link
                        href={item.href}
                        onClick={mobile && onClose ? onClose : undefined}
                        className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white text-sm 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 hover:scale-105"
                        }`}
                    >
                        {item.icon}
                        {item.title}
                    </Link>
                </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 shadow-lg border border-green-700/30 hover:border-green-600/50 transition-all">
                            <NavigationMenuList className="space-x-2 px-2 py-1">
                                <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>

                        <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 shadow-md hover:shadow-lg text-sm"
                            >
                                <LogIn className="mr-2 h-4 w-4" /> LOGIN
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Navbar;