js/utils/sidebar.js

import { overallBackgroundImage } from '../data/areas.js';

export function renderSidebar(title, items) {
    return `
        <div class="relative h-full">
            <nav class="p-4 overflow-y-auto h-full pb-16">
                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">${title}</h3>
                <ul class="space-y-1">
                    ${items.map(item => {
                            const activeClass = item.isActive ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-50';
                            const indentClass = item.isNested ? 'ml-4' : '';
                            
                            if (item.isHeader) {
                                return `
                                    <li class="${indentClass}">
                                        <span class="block px-3 py-2 text-lg font-semibold ${activeClass} rounded-md">${item.label}</span>
                                        ${item.subItems && item.subItems.length > 0 ? `
                                            <ul class="space-y-1 mt-1">
                                                ${item.subItems.map(subItem => {
                                                    const subActiveClass = subItem.isActive ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50';
                                                    return `
                                                        <li class="ml-4"><a href="${subItem.href}" class="page-nav-link block px-3 py-2 text-md ${subActiveClass} rounded-md transition-colors">${subItem.label}</a></li>
                                                    `;
                                                }).join('')}
                                            </ul>
                                        ` : ''}
                                    </li>
                                `;
                            } else {
                                return `
                                    <li class="${indentClass}">
                                        <a href="${item.href}" class="page-nav-link block px-3 py-2 text-lg ${activeClass} rounded-md transition-colors">${item.label}</a>
                                        ${item.subItems && item.subItems.length > 0 ? `
                                            <ul class="space-y-1 mt-1">
                                                ${item.subItems.map(subItem => {
                                                    const subActiveClass = subItem.isActive ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50';
                                                    return `
                                                        <li class="ml-4"><a href="${subItem.href}" class="page-nav-link block px-3 py-2 text-md ${subActiveClass} rounded-md transition-colors">${subItem.label}</a></li>
                                                    `;
                                                }).join('')}
                                            </ul>
                                        ` : ''}
                                    </li>
                                `;
                            }
                        }).join('')}
                    </ul>
                </nav>
                <div id="left-sidebar-attribution" class="absolute bottom-16 left-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded transition-opacity duration-200 max-w-xs z-50">
                    <a href="${overallBackgroundImage.sourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
                        ${overallBackgroundImage.attribution}
                    </a>
                </div>
            </div>
        </div>
    `;
}