98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
import PasswordPopup from "./PasswordPopup";
|
|
|
|
const AdminLayout = () => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const [showPopup, setShowPopup] = useState(false);
|
|
const [popupFor, setPopupFor] = useState("");
|
|
|
|
const PASSWORDS = {
|
|
Projects: "Lcepl@2026", // ← set your Projects password
|
|
Gallery: "Lcepl#2026", // ← set your Gallery password
|
|
};
|
|
|
|
const menuItems = [
|
|
{ name: "Projects", path: "/admin/projects" },
|
|
{ name: "Gallery", path: "/admin/gallery" },
|
|
{ name: "HR", path: "/admin/hr" },
|
|
];
|
|
|
|
// When user clicks menu
|
|
const handleMenuClick = (item) => {
|
|
if (item.name === "Projects" || item.name === "Gallery") {
|
|
setPopupFor(item.name);
|
|
setShowPopup(true);
|
|
} else {
|
|
navigate(item.path);
|
|
}
|
|
};
|
|
|
|
// Validate password
|
|
const handlePasswordSubmit = (password) => {
|
|
if (password === PASSWORDS[popupFor]) {
|
|
setShowPopup(false);
|
|
navigate(`/admin/${popupFor.toLowerCase()}`);
|
|
} else {
|
|
alert("❌ Incorrect password");
|
|
}
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
sessionStorage.removeItem("admin");
|
|
navigate("/admin-login");
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen">
|
|
|
|
{/* Sidebar */}
|
|
<div className="w-64 bg-gray-800 text-white flex flex-col">
|
|
<div className="text-2xl font-bold p-4 border-b border-gray-700">
|
|
Admin Panel
|
|
</div>
|
|
|
|
<nav className="flex-1 p-4">
|
|
{menuItems.map((item) => (
|
|
<button
|
|
key={item.name}
|
|
onClick={() => handleMenuClick(item)}
|
|
className={`w-full text-left px-4 py-2 rounded mb-2 hover:bg-gray-700 transition-colors ${
|
|
location.pathname === item.path ? "bg-gray-700 font-semibold" : ""
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 bg-gray-100 p-4 relative">
|
|
|
|
<button
|
|
onClick={handleLogout}
|
|
className="absolute top-4 right-4 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded"
|
|
>
|
|
Logout
|
|
</button>
|
|
|
|
<Outlet />
|
|
</div>
|
|
|
|
{/* Password Popup */}
|
|
{showPopup && (
|
|
<PasswordPopup
|
|
title={`${popupFor} Access`}
|
|
onSubmit={handlePasswordSubmit}
|
|
onClose={() => setShowPopup(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminLayout;
|