/* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from "react"; import { Head, usePage, router } from "@inertiajs/react"; import styles from "./user_layout.module.scss"; import Sidebar from "@/components/dashboard/Sidebar"; import DashboardNavbar from "@/components/dashboard/Navbar"; import RightSideBar from "@/components/dashboard/RightSideBar"; // import BottomBar from "@/components/dashboard/BottomBar"; interface FlashProps { success?: string | null; error?: string | null; warning?: string | null; info?: string | null; } interface UserDashboardLayoutProps { children: React.ReactNode; title: string; } interface FlashMessageState { type: "success" | "error" | "warning" | "info"; message: string; } const UserDashboardLayout: React.FC = ({ children, title, }) => { const { props } = usePage<{ flash?: FlashProps }>(); const flash = props.flash || {}; const [flashMessage, setFlashMessage] = useState(null); useEffect(() => { const flashTypes: (keyof FlashProps)[] = [ "success", "error", "warning", "info", ]; for (const type of flashTypes) { const message = flash[type]; if (message) { setFlashMessage({ type, message, }); break; } } }, [flash]); useEffect(() => { const handleNavigation = () => { // disable inertia restoring scroll window.history.scrollRestoration = "manual"; // wait for render requestAnimationFrame(() => { const layout = document.querySelector( `.${styles.layout}` ) as HTMLElement; if (layout) { layout.scrollTo({ top: 0, behavior: "smooth", // 🔥 smooth animation }); } // fallback window.scrollTo({ top: 0, behavior: "smooth", }); }); }; const removeListener = router.on("navigate", handleNavigation); return () => removeListener(); }, []); useEffect(() => { if (!flashMessage) return; const timeout = setTimeout(() => { setFlashMessage(null); }, 4000); return () => clearTimeout(timeout); }, [flashMessage]); return ( <> {/* Flash Messages */} {flashMessage && (

{flashMessage.type === "success" && "Success"} {flashMessage.type === "error" && "Error"} {flashMessage.type === "warning" && "Warning"} {flashMessage.type === "info" && "Information"}

{flashMessage.message}

)}

{/* Mobile Bottom Bar */} {/*

*/} {/* Sidebar */}

{/* Main Content */}

{/* Navbar */}

{/* Page Content */}

{children} {/* Right Sidebar */}

); }; export default UserDashboardLayout;