بُنيان
نظام محاسبي متكامل
{topNav.map((n) => {
const Icon = I[n.icon];
if (!n.children) {
return (
onNav(n.id)}>
{n.labelLong}
);
}
const open = !!openGroups[n.id];
const hasActive = groupOfActive(n);
return (
setOpenGroups((s) => ({ ...s, [n.id]: !s[n.id] }))} role="button" aria-expanded={open}>
{n.labelLong}
{open && n.children.map((c) => {
const CIcon = I[c.icon];
return (
onNav(c.id)}>
{c.labelLong}
);
})}
);
})}
تمت المزامنة · متصل
{initials || "؟"}
{user ? user.name : ""}
{roleName}
);
}
window.Rail = Rail;
/* Bonyan ERP — mobile side drawer (fires from the ☰ button, slides from the right in RTL) */
function MobileDrawer({ open, active, onNav, user, onLogout, onClose }) {
const I = window.BnyIcon;
const D = window.BnyData;
// نفس بنية Rail: عناصر مسموحة + مجموعات فيها عنصر مسموح
const topNav = BNY_NAV.map((n) => {
if (!n.children) return window.BnyCan(user, n.perm) ? n : null;
const kids = n.children.filter((c) => window.BnyCan(user, c.perm));
return kids.length ? { ...n, children: kids } : null;
}).filter(Boolean);
const groupOfActive = (n) => n.children && n.children.some((c) => c.id === active);
const [openGroups, setOpenGroups] = React.useState({});
React.useEffect(() => {
if (open) { const o = {}; topNav.forEach((n) => { if (groupOfActive(n)) o[n.id] = true; }); setOpenGroups(o); }
}, [open, active]); // eslint-disable-line
// امنع تمرير الخلفية أثناء فتح الدرج
React.useEffect(() => {
if (!open) return;
const prev = document.body.style.overflow; document.body.style.overflow = "hidden";
return () => { document.body.style.overflow = prev; };
}, [open]);
const roleName = (user && (D.roles.find((r) => r.id === user.role) || {}).name) || "";
const initials = (user ? user.name : "").split(/[\s—-]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("");
const go = (id) => { onNav(id); onClose(); };
const item = (on) => ({
display: "flex", alignItems: "center", gap: 14, width: "100%", boxSizing: "border-box",
padding: "13px 16px", borderRadius: "var(--radius-md)", border: 0, textAlign: "start",
color: on ? "#fff" : "rgba(255,255,255,0.66)", background: on ? "rgba(255,255,255,0.10)" : "transparent",
fontSize: 15, fontWeight: on ? 600 : 500, cursor: "pointer", fontFamily: "var(--font-body)",
borderInlineStart: on ? "3px solid var(--amber-500)" : "3px solid transparent",
});
return (
{/* الخلفية المعتّمة */}
{/* اللوحة المنزلقة من اليمين */}
{/* الرأس: الشعار + إغلاق */}
بُنيان
نظام محاسبي متكامل
{/* الأقسام (قابلة للطي) */}
{topNav.map((n) => {
const Icon = I[n.icon];
if (!n.children) {
return (
);
}
const isOpen = !!openGroups[n.id];
const hasActive = groupOfActive(n);
return (
{isOpen && n.children.map((c) => {
const CIcon = I[c.icon];
return (
);
})}
);
})}
{/* التذييل: المستخدم + خروج */}
{initials || "؟"}
{user ? user.name : ""}
{roleName}