feat: Enhance MainLayout with responsive sidebar and improved flash message handling

resources/js/Layouts/MainLayout.jsx

@@ -1,8 +1,9 @@
 import { Link, usePage } from "@inertiajs/react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export default function MainLayout({ children }) {
-    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
     const { url } = usePage();
 
     const menus = [
@@ -13,51 +14,144 @@ export default function MainLayout({ children }) {
         { name: "Peminjaman", href: "/peminjaman", icon: "📋" },
     ];
 
+    // Deteksi ukuran layar
+    useEffect(() => {
+        const checkScreen = () => {
+            const mobile = window.innerWidth < 1024;
+            setIsMobile(mobile);
+            // Sidebar terbuka default di desktop, tertutup di mobile/tablet
+            if (!mobile) {
+                setSidebarOpen(true);
+            } else {
+                setSidebarOpen(false);
+            }
+        };
+
+        checkScreen();
+        window.addEventListener("resize", checkScreen);
+        return () => window.removeEventListener("resize", checkScreen);
+    }, []);
+
+    // Tutup sidebar saat navigasi di mobile
+    const handleMenuClick = () => {
+        if (isMobile) setSidebarOpen(false);
+    };
+
     return (
-        <div className="flex h-screen bg-gray-100">
+        <div className="flex h-screen bg-gray-100 overflow-hidden">
+            {/* Overlay untuk mobile/tablet */}
+            {isMobile && sidebarOpen && (
+                <div
+                    className="fixed inset-0 bg-black bg-opacity-50 z-20 lg:hidden"
+                    onClick={() => setSidebarOpen(false)}
+                />
+            )}
+
             {/* Sidebar */}
             <aside
-                className={`${sidebarOpen ? "w-64" : "w-16"} bg-indigo-800 text-white transition-all duration-300 flex flex-col`}
+                className={`
+                    ${
+                        isMobile
+                            ? `fixed inset-y-0 left-0 z-30 w-64 transform transition-transform duration-300 ease-in-out
+                           ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}`
+                            : `relative shrink-0 transition-all duration-300
+                           ${sidebarOpen ? "w-64" : "w-16"}`
+                    }
+                    bg-indigo-800 text-white flex flex-col
+                `}
             >
-                <div className="flex items-center justify-between p-4 border-b border-indigo-700">
+                {/* Sidebar Header */}
+                <div className="flex items-center justify-between p-4 border-b border-indigo-700 min-h-16">
                     {sidebarOpen && (
-                        <h1 className="text-xl font-bold">📖 Perpustakaanku</h1>
+                        <h1 className="text-lg font-bold truncate">
+                            📖 Perpustakaanku
+                        </h1>
+                    )}
+                    {/* Tombol tutup di mobile */}
+                    {isMobile ? (
+                        <button
+                            onClick={() => setSidebarOpen(false)}
+                            className="p-2 rounded-lg hover:bg-indigo-700 ml-auto"
+                        >
+                            ✕
+                        </button>
+                    ) : (
+                        <button
+                            onClick={() => setSidebarOpen(!sidebarOpen)}
+                            className="p-2 rounded-lg hover:bg-indigo-700 ml-auto shrink-0"
+                        >
+                            {/* Hamburger icon */}
+                            <div className="w-5 h-4 flex flex-col justify-between">
+                                <span className="block w-full h-0.5 bg-white"></span>
+                                <span className="block w-full h-0.5 bg-white"></span>
+                                <span className="block w-full h-0.5 bg-white"></span>
+                            </div>
+                        </button>
                     )}
-                    <button
-                        onClick={() => setSidebarOpen(!sidebarOpen)}
-                        className="p-1 rounded hover:bg-indigo-700"
-                    >
-                        {sidebarOpen ? "◀" : "▶"}
-                    </button>
                 </div>
-                <nav className="flex-1 p-2 space-y-1">
+
+                {/* Menu Navigasi */}
+                <nav className="flex-1 p-2 space-y-1 overflow-y-auto">
                     {menus.map((menu) => (
                         <Link
                             key={menu.href}
                             href={menu.href}
-                            className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+                            onClick={handleMenuClick}
+                            className={`flex items-center gap-3 px-3 py-3 rounded-lg transition-colors ${
                                 url === menu.href
                                     ? "bg-indigo-600 text-white"
                                     : "hover:bg-indigo-700 text-indigo-200"
                             }`}
                         >
-                            <span className="text-xl">{menu.icon}</span>
+                            <span className="text-xl shrink-0">
-                            {sidebarOpen && (
+                                {menu.icon}
-                                <span className="font-medium">{menu.name}</span>
+                            </span>
+                            {(sidebarOpen || isMobile) && (
+                                <span className="font-medium text-sm">
+                                    {menu.name}
+                                </span>
                             )}
                         </Link>
                     ))}
                 </nav>
+
+                {/* Sidebar Footer */}
+                {(sidebarOpen || isMobile) && (
+                    <div className="p-4 border-t border-indigo-700">
+                        <p className="text-xs text-indigo-300 text-center">
+                            © {new Date().getFullYear()} Perpustakaanku
+                        </p>
+                    </div>
+                )}
             </aside>
 
             {/* Main Content */}
-            <div className="flex-1 flex flex-col overflow-hidden">
+            <div className="flex-1 flex flex-col overflow-hidden min-w-0">
                 {/* Header */}
-                <header className="bg-white shadow-sm px-6 py-4 flex items-center justify-between">
+                <header className="bg-white shadow-sm px-4 py-3 flex items-center justify-between shrink-0 min-h-16">
-                    <h2 className="text-lg font-semibold text-gray-700">
+                    <div className="flex items-center gap-3">
-                        Sistem Perpustakaanku
+                        {/* Hamburger Menu - hanya tampil di mobile/tablet */}
-                    </h2>
+                        {isMobile && (
-                    <span className="text-sm text-gray-500">
+                            <button
+                                onClick={() => setSidebarOpen(!sidebarOpen)}
+                                className="p-2 rounded-lg hover:bg-gray-100 text-gray-600 transition-colors"
+                            >
+                                <div className="w-5 h-4 flex flex-col justify-between">
+                                    <span className="block w-full h-0.5 bg-gray-600"></span>
+                                    <span className="block w-full h-0.5 bg-gray-600"></span>
+                                    <span className="block w-full h-0.5 bg-gray-600"></span>
+                                </div>
+                            </button>
+                        )}
+                        <h2 className="text-base font-semibold text-gray-700 hidden sm:block">
+                            Sistem Perpustakaanku
+                        </h2>
+                        <h2 className="text-base font-semibold text-gray-700 sm:hidden">
+                            Perpustakaanku
+                        </h2>
+                    </div>
+
+                    <span className="text-xs text-gray-500 hidden md:block">
                         📅{" "}
                         {new Date().toLocaleDateString("id-ID", {
                             weekday: "long",
@@ -66,35 +160,98 @@ export default function MainLayout({ children }) {
                             day: "numeric",
                         })}
                     </span>
+
+                    {/* Tanggal singkat untuk mobile */}
+                    <span className="text-xs text-gray-500 md:hidden">
+                        📅{" "}
+                        {new Date().toLocaleDateString("id-ID", {
+                            day: "numeric",
+                            month: "short",
+                            year: "numeric",
+                        })}
+                    </span>
                 </header>
 
                 {/* Flash Message */}
                 <FlashMessage />
 
                 {/* Content */}
-                <main className="flex-1 overflow-y-auto p-6">{children}</main>
+                <main className="flex-1 overflow-y-auto p-4 md:p-6">
+                    {children}
+                </main>
             </div>
+
+            {/* Bottom Navigation Bar - Khusus Mobile */}
+            {isMobile && (
+                <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20 lg:hidden">
+                    <div className="flex items-center justify-around py-2">
+                        {menus.map((menu) => (
+                            <Link
+                                key={menu.href}
+                                href={menu.href}
+                                className={`flex flex-col items-center gap-1 px-3 py-1 rounded-lg transition-colors ${
+                                    url === menu.href
+                                        ? "text-indigo-600"
+                                        : "text-gray-500 hover:text-indigo-500"
+                                }`}
+                            >
+                                <span className="text-xl">{menu.icon}</span>
+                                <span className="text-xs font-medium">
+                                    {menu.name}
+                                </span>
+                            </Link>
+                        ))}
+                    </div>
+                </nav>
+            )}
         </div>
     );
 }
 
 function FlashMessage() {
     const { flash } = usePage().props;
+    const [visible, setVisible] = useState(true);
 
+    // Auto hide setelah 4 detik
+    useEffect(() => {
+        if (flash?.success || flash?.error) {
+            setVisible(true);
+            const timer = setTimeout(() => setVisible(false), 4000);
+            return () => clearTimeout(timer);
+        }
+    }, [flash]);
+
+    if (!visible) return null;
     if (!flash?.success && !flash?.error) return null;
 
     return (
-        <div className="mx-6 mt-4 space-y-2">
+        <div className="mx-4 md:mx-6 mt-4 space-y-2">
             {flash?.success && (
-                <div className="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
+                <div className="p-3 md:p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center justify-between gap-2">
-                    <span>✅</span>
+                    <div className="flex items-center gap-2">
-                    <span>{flash.success}</span>
+                        <span>✅</span>
+                        <span className="text-sm">{flash.success}</span>
+                    </div>
+                    <button
+                        onClick={() => setVisible(false)}
+                        className="text-green-500 hover:text-green-700 shrink-0"
+                    >
+                        ✕
+                    </button>
                 </div>
             )}
             {flash?.error && (
-                <div className="p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
+                <div className="p-3 md:p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center justify-between gap-2">
-                    <span>❌</span>
+                    <div className="flex items-center gap-2">
-                    <span>{flash.error}</span>
+                        <span>❌</span>
+                        <span className="text-sm">{flash.error}</span>
+                    </div>
+                    <button
+                        onClick={() => setVisible(false)}
+                        className="text-red-500 hover:text-red-700 shrink-0"
+                    >
+                        ✕
+                    </button>
                 </div>
             )}
         </div>