// Nav.jsx — top nav with hover dropdowns + user menu function Nav({ view, go, lang, setLang, c }) { const n = c.nav[lang]; const isKo = lang === 'ko'; const auth = window.useAuth ? window.useAuth() : { user: null, ready: true }; const [menuOpen, setMenuOpen] = React.useState(false); // Bell dropdown: list of recent notifications visible when the user clicks // the bell icon. Powered by the same /api/me/notifications endpoint that // Member.jsx uses, so the lists stay consistent. const [bellOpen, setBellOpen] = React.useState(false); const [notifs, setNotifs] = React.useState([]); const [unread, setUnread] = React.useState(0); async function refreshNotifs() { if (!auth.user) { setUnread(0); setNotifs([]); return; } try { const r = await window.DreamPathAuth.authFetch('/api/me/notifications'); if (!r.ok) return; const d = await r.json(); setUnread(d.unread || 0); setNotifs((d.items || []).slice(0, 6)); } catch {} } React.useEffect(() => { if (!auth.user) { setUnread(0); setNotifs([]); return; } let alive = true; refreshNotifs(); const t = setInterval(() => { if (alive) refreshNotifs(); }, 60_000); return () => { alive = false; clearInterval(t); }; }, [auth.user]); // Close bell dropdown on outside click + esc. React.useEffect(() => { if (!bellOpen) return; const onDoc = (e) => { if (!e.target.closest('.bell-wrap')) setBellOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setBellOpen(false); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [bellOpen]); function openNotification(n) { // Mark read locally + on the server, then jump to My Page with an // intent flag so Member.jsx auto-switches to the notifications section. if (!n.read_at) { window.DreamPathAuth.authFetch('/api/me/notifications/' + encodeURIComponent(n.id)).catch(() => {}); } sessionStorage.setItem('dp_open_notification', n.id); setBellOpen(false); go('member'); } function viewAllNotifications() { sessionStorage.setItem('dp_open_notifications_section', '1'); setBellOpen(false); go('member'); } // Theme toggle state — re-render when the theme store fires. const [themeChoice, setThemeChoice] = React.useState(() => (window.DreamPathTheme && window.DreamPathTheme.choice) || 'system'); React.useEffect(() => { if (!window.DreamPathTheme) return; const unsub = window.DreamPathTheme.subscribe(() => setThemeChoice(window.DreamPathTheme.choice)); return () => unsub(); }, []); function setTheme(next) { if (window.DreamPathTheme) window.DreamPathTheme.set(next); else setThemeChoice(next); } // Build the "프로그램" submenu by category from current c.programs. // Per-program editable labels (category_ko / category_en) take precedence; // legacy programs without those fields fall back to the slug or the // first segment of the kicker. Slug is the URL key for /programs?cat=. const programs = (c && Array.isArray(c.programs)) ? c.programs : []; const categories = (() => { const seen = new Set(); const out = []; programs.forEach(p => { const fallback = p.kicker ? p.kicker.split('·')[0].trim() : ''; const slug = (p.category || fallback).toLowerCase(); if (!slug) return; if (seen.has(slug)) return; seen.add(slug); const label = (isKo ? (p.category_ko || fallback) : (p.category_en || fallback)) || fallback; out.push({ key: slug, label }); }); return out; })(); // Role-based view permissions: when a user is logged in AND their role's // member_roles entry exists, hide nav links the role can't view. Anonymous // visitors and roles without an entry see everything (fail-open for guests). const roles = (c && c.member_roles && Array.isArray(c.member_roles.roles)) ? c.member_roles.roles : []; const myRole = auth.user ? roles.find(r => r && r.id === auth.user.role) : null; function canView(viewId) { if (!myRole || !myRole.pages) return true; // no policy → allowed const p = myRole.pages[viewId]; if (!p) return true; // page not listed → allowed (don't surprise legacy roles) return p.view !== false && p.view !== 0; // explicit false hides it } // Menu structure — top-level items have either `view` (direct link) or // `children` (dropdown). Active state highlights the parent if any of // the children's views are active. Items the role can't view are filtered // out below; a parent with zero remaining children is dropped entirely. const RAW_MENU = [ { label: n.about, parentViews: ['about','team','partners'], children: [ { view: 'about', label: isKo ? '프로젝트 소개' : 'The project' }, { view: 'team', label: isKo ? '프로젝트 팀' : 'Project team' }, { view: 'partners', label: isKo ? '협력기관' : 'Partnerships' }, ], }, { label: n.programs, parentViews: ['programs','program','news','stories'], children: [ { view: 'programs', label: isKo ? '전체 프로그램' : 'All programs' }, ...categories.map(cat => ({ view: 'programs', opts: { cat: cat.key }, label: cat.label, })), { divider: true }, { view: 'news', label: isKo ? '프로그램 소식' : 'Program news' }, { view: 'stories', label: isKo ? '프로그램 후기' : 'Program reviews' }, ], }, { label: n.scholarships || (isKo ? '장학 프로그램' : 'Scholarships'), view: 'scholarships', parentViews: ['scholarships'] }, { label: n.contact || (isKo ? '문의하기' : 'Contact'), view: 'contact', parentViews: ['contact'] }, ]; const MENU = RAW_MENU.flatMap(item => { if (item.children) { const kids = item.children.filter(k => k.divider || canView(k.view)); if (kids.filter(k => !k.divider).length === 0) return []; return [{ ...item, children: kids }]; } return canView(item.view) ? [item] : []; }); function openAuth(mode) { window.dispatchEvent(new CustomEvent('dp-open-auth', { detail: { mode } })); setMenuOpen(false); setMobileOpen(false); } // Mobile slide-in panel state. Opens on hamburger tap; closes on link // navigation, on overlay click, or on Esc. const [mobileOpen, setMobileOpen] = React.useState(false); React.useEffect(() => { if (!mobileOpen) return; const onKey = (e) => { if (e.key === 'Escape') setMobileOpen(false); }; document.addEventListener('keydown', onKey); // Lock body scroll while the panel is up. const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; }; }, [mobileOpen]); function mobileGo(viewId, opts) { setMobileOpen(false); go(viewId, null, opts); } return ( ); } function NavGroup({ item, view, go }) { const [open, setOpen] = React.useState(false); const closeTimer = React.useRef(null); const active = item.parentViews && item.parentViews.includes(view); function show() { clearTimeout(closeTimer.current); setOpen(true); } function delayedHide() { // small delay so cursor can travel from trigger to panel closeTimer.current = setTimeout(() => setOpen(false), 120); } function pickChild(child) { if (child.view) go(child.view, null, child.opts); setOpen(false); } return (
{ if (!e.currentTarget.contains(e.relatedTarget)) delayedHide(); }}> {open && (
{(item.children || []).map((c, i) => c.divider ? )}
); } window.Nav = Nav; window.NavGroup = NavGroup;