File size: 3,826 Bytes
98f8ae8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
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>
`;
}
|