// === Main app shell === function Sidebar({ active, go, state, theme, setTheme, collapsed, setCollapsed, mobileOpen, setMobileOpen }) { const totalDone = M2_TOOL_IDS.filter((id) => sectionComplete(id, state)).length; const pct = Math.round(totalDone / 8 * 100); const activeModule = SECTIONS.find((s) => s.id === active)?.module || "home"; const [optsOpen, setOptsOpen] = React.useState(false); const [hoverModule, setHoverModule] = React.useState(null); const closeMobile = () => setMobileOpen(false); // Module icons — distincte pentru collapsed mode (mai mari, mai expressive) const moduleIcon = (code, large) => { const size = large ? 22 : 14; const map = { // M1: book opened M1: , // M2: wrench/tool M2: , // M3: play in circle M3: , // M4: trophy M4: }; return map[code]; }; return ( ); } // Floating "scroll to top" button — appears once user scrolls past 400px, // fades back out when at the top. Smooth scroll on click. function ScrollToTopButton() { const [visible, setVisible] = React.useState(false); React.useEffect(() => { const SHOW_AT = 400; let ticking = false; const onScroll = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { setVisible(window.scrollY > SHOW_AT); ticking = false; }); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); // initial check return () => window.removeEventListener("scroll", onScroll); }, []); const handleClick = () => { window.scrollTo({ top: 0, behavior: "smooth" }); }; return ( ); } function MobileTopbar({ go, setMobileOpen, mobileOpen }) { return (
); } function App() { const [state, update, reset] = useAppState(); const [active, setActive] = React.useState(() => { const h = window.location.hash.replace("#", ""); return SECTIONS.find((s) => s.id === h) ? h : "intro"; }); const [theme, setThemeState] = React.useState(() => { try { return localStorage.getItem("pm_theme") || "light"; } catch (e) { return "light"; } }); const [collapsed, setCollapsedState] = React.useState(() => { try { return localStorage.getItem("pm_sidebar_collapsed") === "1"; } catch (e) { return false; } }); const [mobileOpen, setMobileOpen] = React.useState(false); // Lock body scroll when mobile drawer is open React.useEffect(() => { if (mobileOpen) { const scrollY = window.scrollY; document.body.style.top = `-${scrollY}px`; document.body.classList.add("no-scroll"); return () => { document.body.classList.remove("no-scroll"); document.body.style.top = ""; window.scrollTo(0, scrollY); }; } }, [mobileOpen]); // Close mobile drawer when clicking outside (on main content) React.useEffect(() => { if (!mobileOpen) return; const handler = (e) => { const sidebar = document.querySelector(".sidebar"); const burger = document.querySelector(".topbar-burger"); if (!sidebar) return; if (sidebar.contains(e.target)) return; if (burger && burger.contains(e.target)) return; setMobileOpen(false); }; document.addEventListener("mousedown", handler); document.addEventListener("touchstart", handler); return () => { document.removeEventListener("mousedown", handler); document.removeEventListener("touchstart", handler); }; }, [mobileOpen]); React.useEffect(() => { document.documentElement.setAttribute("data-theme", theme); try { localStorage.setItem("pm_theme", theme); } catch (e) {} }, [theme]); React.useEffect(() => { try { localStorage.setItem("pm_sidebar_collapsed", collapsed ? "1" : "0"); } catch (e) {} }, [collapsed]); // Auto-collapse on small screens, restore on large React.useEffect(() => { const check = () => { const w = window.innerWidth; if (w < 1100 && w >= 900) { setCollapsedState(true); } }; check(); window.addEventListener("resize", check); return () => window.removeEventListener("resize", check); }, []); const setTheme = React.useCallback((t) => setThemeState(t), []); const setCollapsed = React.useCallback((c) => setCollapsedState(c), []); const go = React.useCallback((id) => { setActive(id); window.location.hash = id; window.scrollTo({ top: 0, behavior: "instant" }); }, []); React.useEffect(() => { const onHash = () => { const h = window.location.hash.replace("#", ""); if (SECTIONS.find((s) => s.id === h)) setActive(h); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); // Close mobile drawer when route changes via sub-items only (not via outer modules) // Sub-items in nav call closeMobile() directly. Outer modules just navigate. const renderSection = () => { const props = { state, update, go, reset }; switch (active) { case "intro": return ; case "m1-overview": return ; case "m1-definitions": return ; case "m1-pert": return ; case "m1-eisenhower": return ; case "m1-orgs": return ; case "m1-glossary": return ; case "m1-quiz": return ; case "m3-overview": return ; case "m3-sim": return ; case "m3-report": return ; case "m3-team-setup": return ; case "m3-team-sim": return ; case "m3-team-report": return ; case "privacy": return ; case "history": return ; case "m4-overview": return ; case "m4-exam": return ; case "m4-certificate": return ; case "m2-overview": return ; case "org": return ; case "scope": return ; case "needs": return ; case "activities": return ; case "gantt": return ; case "budget": return ; case "mgmt": return ; case "risk": return ; case "export": return ; case "m1": return ; case "m3": return ; case "m4": return ; default: return ; } }; return (
{mobileOpen &&
setMobileOpen(false)}>
}
{renderSection()}
); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();