import DashboardController from "@/actions/App/Http/Controllers/Dashboard/IndexController"; import { useTheme } from "@/hooks/use-theme"; import { logout } from "@/routes"; import { SharedData } from "@/types"; import { Link, router, usePage } from "@inertiajs/react"; import clsx from "clsx"; import { Fragment, useEffect, useState } from "react"; import { Button, Form, Image, InputGroup, NavDropdown, OverlayTrigger, Tooltip, } from "react-bootstrap"; import { BiExitFullscreen, BiFullscreen, BiMoon, BiSun } from "react-icons/bi"; import { MdLogout, MdMenu, MdPersonOutline, MdSearch } from "react-icons/md"; interface AppHeaderProps { setIsSidebarMobileOpen: (open: boolean) => void; } const iconSize: number = 20; export default function AppHeaderLayout({ setIsSidebarMobileOpen, }: AppHeaderProps) { const { auth } = usePage().props; const { url } = usePage(); const user = auth.user; const { isDarkMode, toggleTheme } = useTheme(); const [sidebarSize, setSidebarSize] = useState("lg"); const [mobileView, setMobileView] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); const [noResi, setNoResi] = useState(""); useEffect(() => { // Initialize setSidebarSize( document.documentElement.getAttribute("data-sidebar-size") ?? "lg", ); setMobileView( document.documentElement.getAttribute("data-mobile-view") === "true", ); // Check initial fullscreen state setIsFullscreen(!!document.fullscreenElement); // Listen for fullscreen changes const handleFullscreenChange = () => { setIsFullscreen(!!document.fullscreenElement); }; document.addEventListener("fullscreenchange", handleFullscreenChange); // MutationObserver to watch attribute changes on const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { if ( mutation.type === "attributes" && mutation.attributeName === "data-sidebar-size" ) { setSidebarSize( document.documentElement.getAttribute( "data-sidebar-size", ) ?? "lg", ); } if ( mutation.type === "attributes" && mutation.attributeName === "data-mobile-view" ) { setMobileView( document.documentElement.getAttribute( "data-mobile-view", ) === "true", ); } } }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-sidebar-size", "data-mobile-view"], }); // Fallback: listen for a custom event if your app emits one when toggling sidebar const onSidebarSizeChanged = (e: any) => { const val = e?.detail?.value || document.documentElement.getAttribute("data-sidebar-size"); setSidebarSize(val ?? "lg"); }; window.addEventListener( "sidebar-size-changed", onSidebarSizeChanged as EventListener, ); const onMobileViewChanged = (e: any) => { const val = e?.detail?.value || document.documentElement.getAttribute("data-mobile-view"); setMobileView(val === "true"); }; window.addEventListener( "mobile-view-changed", onMobileViewChanged as EventListener, ); return () => { observer.disconnect(); document.removeEventListener( "fullscreenchange", handleFullscreenChange, ); window.removeEventListener( "sidebar-size-changed", onSidebarSizeChanged as EventListener, ); window.removeEventListener( "mobile-view-changed", onMobileViewChanged as EventListener, ); }; }, []); const toggleFullscreen = async () => { try { if (!document.fullscreenElement) { // Enter fullscreen await document.documentElement.requestFullscreen(); } else { // Exit fullscreen await document.exitFullscreen(); } } catch (error) { console.error("Error toggling fullscreen:", error); } }; return (
{mobileView ? (
DashboardController.index.url()} >
SIAB
Absensi Paruh Waktu
) : null}
{isDarkMode ? "Light" : "Dark"} } >
{!mobileView && (
{isFullscreen ? "Exit Fullscreen" : "Fullscreen"} } >
)}
) : (
{user.name}
) } id="basic-nav-dropdown" align="end" className="no-caret" > Profile Saya router.post(route("logout"))} as="button" > Logout
); }