js/components/PageNavigation.js

// PageNavigation.js - Reusable page navigation component
// Creates the "On this page" / breadcrumb navigation card

/**
 * Renders a page navigation card
 * @param {string} label - Label for the navigation (e.g., "On this page:", "Area Name:")
 * @param {Array} items - Array of navigation items: { text, href, active }
 * @returns {string} HTML string for the navigation card
 */
export function renderPageNavigation(label, items) {
    if (!items || items.length === 0) {
        return '';
    }

    return `
        <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
            <div class="bg-white/85 backdrop-blur-sm shadow-md rounded-lg px-6 py-4 w-full border border-gray-200" style="max-width: min(90%, 1400px); margin: 0 auto;">
                <div class="flex items-center gap-3 overflow-x-auto">
                    <span class="text-gray-600 font-semibold whitespace-nowrap text-base">${label}</span>
                    ${items.map((item, index) => {
                        const activeClasses = item.active 
                            ? 'text-blue-600 font-semibold underline decoration-2 underline-offset-2' 
                            : 'text-gray-700 hover:text-blue-600';
                        
                        return `
                            ${index > 0 ? '<span class="text-gray-300">•</span>' : ''}
                            <a href="${item.href}" class="px-4 py-2 text-base font-medium ${activeClasses} hover:bg-blue-50 rounded transition-colors whitespace-nowrap">${item.text}</a>
                        `;
                    }).join('')}
                </div>
            </div>
        </section>
    `;
}

/**
 * Convenience function for home page navigation
 */
export function renderHomeNavigation() {
    return renderPageNavigation('On this page:', [
        { text: 'About', href: '/#about' },
        { text: 'Recent Works', href: '/#recent-works' },
        { text: 'Research Areas', href: '/#research-areas' },
        { text: 'Team Members', href: '/#team' }
    ]);
}

/**
 * Convenience function for area page navigation
 * @param {string} areaId - Area identifier
 * @param {string} areaTitle - Area display title
 * @param {Array} topics - Array of topics: { id, navName }
 * @param {string} currentTopicId - Current topic ID (if any)
 */
export function renderAreaNavigation(areaId, areaTitle, topics, currentTopicId = null) {
    const items = [
        { 
            text: 'Overview', 
            href: `/${areaId}`,
            active: currentTopicId === null
        },
        ...topics.map(topic => ({
            text: topic.navName,
            href: `/${areaId}/${topic.id}`,
            active: topic.id === currentTopicId
        }))
    ];

    return renderPageNavigation(`${areaTitle}:`, items);
}