Upload 4 files

js/utils/dom.js

@@ -0,0 +1,13 @@
+export function scrollToSection(sectionId) {
+    const element = document.getElementById(sectionId);
+    if (element) {
+        const elementRect = element.getBoundingClientRect();
+        const absoluteElementTop = elementRect.top + window.pageYOffset;
+        const offset = 120; // Account for fixed header + some padding
+        
+        window.scrollTo({
+            top: absoluteElementTop - offset,
+            behavior: 'smooth'
+        });
+    }
+}

js/utils/router.js

@@ -0,0 +1,409 @@
+// router.js - Simple SPA router
+import { renderHomePage, getHomePageSidebar } from '../pages/HomePage.js';
+import { renderAreaPage, getAreaPageSidebar } from '../pages/AreaPage.js';
+import { renderResourcesPage, getResourcesPageSidebar } from '../pages/ResourcesPage.js';
+import { scrollToSection } from './dom.js';
+
+class Router {
+    constructor() {
+        this.routes = {
+            '/': 'home',
+            '/home': 'home',
+            '/efficiency': 'efficiency',
+            '/personal': 'personal', 
+            '/rights': 'rights',
+            '/ecosystems': 'ecosystems',
+            '/about': 'resources'
+        };
+        
+        this.currentPage = null;
+        this.init();
+    }
+
+    init() {
+        // Handle initial page load
+        console.log('Initializing router');
+        this.loadPage(window.location.pathname);
+        
+        // Handle browser back/forward
+        window.addEventListener('popstate', (e) => {
+            const path = window.location.pathname;
+            const hash = window.location.hash;
+            const fullUrl = path + hash;
+            
+            // Use navigateToUrl to ensure proper scroll behavior
+            this.navigateToUrl(fullUrl);
+        });
+        
+        // Handle hash changes for navigation
+        window.addEventListener('hashchange', (e) => {
+            const hash = window.location.hash.substring(1);
+            if (hash) {
+                // Scroll to the section after a short delay to ensure content is loaded
+                setTimeout(() => scrollToSection(hash), 100);
+            }
+        });
+        
+        // Handle initial hash if present
+        const initialHash = window.location.hash.substring(1);
+        if (initialHash) {
+            setTimeout(() => scrollToSection(initialHash), 200);
+        }
+        
+        // Initialize unified navigation handling
+        this.initializeNavigation();
+    }
+
+    async loadPage(path) {
+        const route = this.routes[path] || 'home';
+        
+        if (this.currentPage === route) {
+            // Same page, no need to reload
+            return;
+        }
+        
+        this.currentPage = route;
+
+        console.log('Loading page:', route);
+        // Handle background for all pages
+        await this.setPageBackground(route);
+
+        console.log('Background set for:', route);
+
+        try {
+            switch (route) {
+                case 'home':
+                    await this.loadHomePage();
+                    break;
+                case 'efficiency':
+                case 'personal':
+                case 'rights':
+                case 'ecosystems':
+                    await this.loadAreaPage(route);
+                    break;
+                case 'resources':
+                    await this.loadResourcesPage();
+                    break;
+                default:
+                    await this.loadHomePage();
+            }
+            
+        } catch (error) {
+            console.error('Error loading page:', error);
+            // Fallback to home page
+            await this.loadHomePage();
+        }
+        
+        console.log('Page loaded:', route);
+        
+        return Promise.resolve();
+    }
+
+    async setPageBackground(route) {
+        console.log('Setting background for route:', route);
+        // Clear any existing background
+        this.clearBackground();
+        
+        let backgroundImage, attribution, sourceUrl;
+        
+        if (route === 'home' || route === 'resources') {
+            const { homeBackgroundImage } = await import('../data/areas.js');
+            backgroundImage = homeBackgroundImage.image;
+            attribution = homeBackgroundImage.attribution;
+            sourceUrl = homeBackgroundImage.sourceUrl;
+        } else {
+            // Area pages
+            const { areasData } = await import('../data/areas.js');
+            const area = areasData[route];
+            backgroundImage = area.image;
+            attribution = area.imageAttribution;
+            sourceUrl = area.imageSourceUrl;
+        }
+        
+        // Create background element at document level
+        const backgroundDiv = document.createElement('div');
+        backgroundDiv.id = 'page-background';
+        backgroundDiv.className = 'fixed opacity-40 z-0';
+        
+        // The positioning logic is now in updatePageBackgroundPosition, call it after adding to DOM
+        document.body.insertAdjacentElement('afterbegin', backgroundDiv);
+        updatePageBackgroundPosition(); // Set initial position
+        
+        backgroundDiv.innerHTML = `
+            <!-- Background Image Main Content -->
+            <img src="images/${backgroundImage}" alt="" class="w-full h-full object-cover pointer-events-none">
+            <div id="bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
+                <a href="${sourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
+                    ${attribution}
+                </a>
+            </div>
+        `;
+        
+        // Add hover functionality for attribution
+        this.initializeBackgroundAttribution();
+    }
+    
+    clearBackground() {
+        const existingBg = document.getElementById('page-background');
+        if (existingBg) {
+            existingBg.remove();
+        }
+    }
+    
+    initializeBackgroundAttribution() {
+        const backgroundContainer = document.getElementById('page-background');
+        const attribution = document.getElementById('bg-attribution');
+        
+        if (!backgroundContainer || !attribution) return;
+        
+        backgroundContainer.addEventListener('mouseenter', () => {
+            attribution.style.opacity = '1';
+        });
+        
+        backgroundContainer.addEventListener('mouseleave', () => {
+            attribution.style.opacity = '0';
+        });
+    }
+
+    async loadHomePage() {
+        const mainContent = document.getElementById('main-content');
+        const leftSidebar = document.getElementById('left-sidebar');
+        
+        if (!mainContent) {
+            return;
+        }
+
+        try {
+            // Get page content and sidebar
+            const homePage = renderHomePage();
+            
+            // Update content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = homePage.content;
+            
+            // Update sidebar if it exists
+            if (leftSidebar) {
+                leftSidebar.innerHTML = getHomePageSidebar();
+            }
+            
+            // Initialize page
+            if (homePage.init) {
+                homePage.init();
+            }
+            
+            // Initialize left sidebar attribution after content is loaded
+            initializeLeftSidebarAttribution();
+
+            // Update navigation state
+            this.updateNavigation('home');
+        } catch (error) {
+            // Fallback to error content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8">
+                    <h1 class="text-3xl font-bold text-red-600 mb-6">Error Loading Page</h1>
+                    <p class="text-gray-700">Sorry, there was an error loading the home page.</p>
+                </div>
+            `;
+        }
+    }
+
+    async loadAreaPage(area) {
+        const mainContent = document.getElementById('main-content');
+        const leftSidebar = document.getElementById('left-sidebar');
+        
+        if (!mainContent) {
+            return;
+        }
+
+        try {
+            // Get area page content and sidebar
+            const areaPage = renderAreaPage(area);
+            
+            // Update content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = areaPage.content;
+            
+            // Update sidebar
+            if (leftSidebar) {
+                leftSidebar.innerHTML = getAreaPageSidebar(area);
+            }
+            
+            // Initialize page
+            if (areaPage.init) {
+                areaPage.init();
+            }
+            
+            // Initialize left sidebar attribution after content is loaded
+            initializeLeftSidebarAttribution();
+
+        } catch (error) {
+            console.error(`Error loading ${area} page:`, error);
+            
+            // Fallback content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8">
+                    <h1 class="text-3xl font-bold text-red-600 mb-6">Error Loading Page</h1>
+                    <p class="text-gray-700">Sorry, there was an error loading the ${area} page.</p>
+                </div>
+            `;
+        }
+        
+        this.updateNavigation(area);
+    }
+
+    async loadResourcesPage() {
+        const mainContent = document.getElementById('main-content');
+        const leftSidebar = document.getElementById('left-sidebar');
+        
+        if (!mainContent) return;
+
+        try {
+            // Get resources page content and sidebar
+            const resourcesPage = renderResourcesPage();
+            
+            // Update content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = resourcesPage.content;
+            
+            // Update sidebar
+            if (leftSidebar) {
+                leftSidebar.innerHTML = getResourcesPageSidebar();
+            }
+            
+            // Initialize page
+            if (resourcesPage.init) {
+                resourcesPage.init();
+            }
+            
+            // Initialize left sidebar attribution after content is loaded
+            initializeLeftSidebarAttribution();
+
+        } catch (error) {
+            // Fallback content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8">
+                    <h1 class="text-3xl font-bold text-red-600 mb-6">Error Loading Page</h1>
+                    <p class="text-gray-700">Sorry, there was an error loading the resources page.</p>
+                </div>
+            `;
+        }
+        
+        this.updateNavigation('resources');
+    }
+
+    updateNavigation(currentPage) {
+        // Update header navigation active states
+        const navLinks = document.querySelectorAll('header nav a');
+        navLinks.forEach(link => {
+            link.classList.remove('text-blue-600', 'bg-blue-50');
+            link.classList.add('text-gray-700');
+            
+            const href = link.getAttribute('href');
+            if ((currentPage === 'home' && (href === '/' || href === '/home')) ||
+                (currentPage === 'resources' && href === '/about') ||
+                (currentPage !== 'home' && currentPage !== 'resources' && href === `/${currentPage}`)) {
+                link.classList.remove('text-gray-700');
+                link.classList.add('text-blue-600', 'bg-blue-50');
+            }
+        });
+    }
+
+
+    initializeNavigation() {
+        // Use event delegation to handle all navigation links
+        document.addEventListener('click', (e) => {
+            const link = e.target.closest('a');
+            if (!link) return;
+            
+            const href = link.getAttribute('href');
+            if (!href) return;
+            
+            // Handle different types of links
+            if (href.startsWith('/') && !href.startsWith('/js/') && !href.startsWith('/css/') && !href.startsWith('/images/')) {
+                // Check if this is a known SPA route
+                const path = href.split('#')[0];
+                if (this.routes[path]) {
+                    e.preventDefault();
+                    this.navigateToUrl(href);
+                }
+            } else if (href.startsWith('#')) {
+                // Same-page hash navigation
+                e.preventDefault();
+                scrollToSection(href.substring(1));
+            }
+            // External links are handled normally by browser
+        });
+    }
+
+    navigateToUrl(fullUrl) {
+        // Parse URL into path and hash
+        const [path, hash] = fullUrl.split('#');
+        
+        // Update browser URL
+        window.history.pushState({}, '', fullUrl);
+        
+        // Load page and then handle hash
+        this.loadPage(path).then(() => {
+            if (hash) {
+                setTimeout(() => scrollToSection(hash), 100);
+            } else {
+                // No hash - scroll to top of page with a delay to ensure content is rendered
+                setTimeout(() => {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }, 100);
+            }
+        });
+    }
+
+}
+
+// Export router instance
+export const router = new Router();
+
+// New function to update the position and size of the page background
+function updatePageBackgroundPosition() {
+    const backgroundDiv = document.getElementById('page-background');
+    if (!backgroundDiv) return;
+
+    const headerHeight = getComputedStyle(document.documentElement).getPropertyValue('--header-height');
+    const leftSidebar = document.getElementById('left-sidebar');
+    const searchSidebar = document.getElementById('search-sidebar');
+
+    const leftSidebarWidth = leftSidebar.classList.contains('-translate-x-full') ? 0 : leftSidebar.offsetWidth;
+    const rightSidebarWidth = searchSidebar.classList.contains('translate-x-full') ? 0 : searchSidebar.offsetWidth;
+
+    backgroundDiv.style.cssText = `
+        top: ${headerHeight};
+        left: ${leftSidebarWidth}px;
+        right: ${rightSidebarWidth}px;
+        bottom: 0;
+        width: calc(100% - ${leftSidebarWidth + rightSidebarWidth}px);
+        height: calc(100vh - ${headerHeight});
+        transition: left 0.3s ease-in-out, width 0.3s ease-in-out, right 0.3s ease-in-out; /* Add transition for smooth movement */
+    `;
+}
+
+// Export the new function so main.js can call it
+export { updatePageBackgroundPosition };
+
+// Function to initialize the attribution hover for the left sidebar
+function initializeLeftSidebarAttribution() {
+    const leftSidebarContainer = document.getElementById('left-sidebar');
+    const attribution = document.getElementById('left-sidebar-attribution');
+    
+    if (!leftSidebarContainer || !attribution) return;
+    
+    leftSidebarContainer.addEventListener('mouseenter', () => {
+        attribution.style.opacity = '1';
+    });
+    
+    leftSidebarContainer.addEventListener('mouseleave', () => {
+        attribution.style.opacity = '0';
+    });
+}
+
+// Export the new function as well
+export { initializeLeftSidebarAttribution };

js/utils/search.js

@@ -0,0 +1,310 @@
+// search.js - Complete MiniSearch implementation with resources and scores
+import { sampleResources } from '../data/resources.js';
+import { areasData } from '../data/areas.js';
+
+let miniSearch, miniSearchResources;
+let allArtifacts; // no longer needs to be explicitly defined
+
+// Helper to create and populate a MiniSearch instance
+function createMiniSearchIndex(data, storeFields) {
+    const search = new MiniSearch({
+        fields: ['title', 'description', 'areas', 'topics'],
+        storeFields: storeFields
+    });
+    search.addAll(data);
+    return search;
+}
+
+// Initialize search
+export async function initializeSearch(artifactsData) {
+    // Assign the passed artifactsData to allArtifacts
+    allArtifacts = artifactsData;
+
+    // The fetch for artifacts.json is removed from here since it's now loaded in main.js
+    
+    // Prepare data for MiniSearch
+    const searchData = allArtifacts.map((artifact, index) => ({
+        id: index,
+        title: artifact.title,
+        description: artifact.description,
+        type: artifact.type,
+        areas: (artifact.areas || []).join(' '),
+        topics: (artifact.topics || []).join(' '),
+        url: artifact.url,
+        date: artifact.date
+    }));
+    
+    // Prepare resources data
+    const resourcesData = sampleResources.map((resource, index) => ({
+        id: index,
+        title: resource.title,
+        description: resource.description,
+        type: resource.type,
+        areas: (resource.areaTags || []).join(' '),
+        topics: (resource.subAreaTags || []).join(' '),
+        url: resource.url,
+        date: resource.date
+    }));
+    
+    // Initialize MiniSearch for artifacts
+    miniSearch = createMiniSearchIndex(searchData, ['title', 'description', 'type', 'areas', 'topics', 'url', 'date']);
+    
+    // Initialize MiniSearch for resources
+    miniSearchResources = createMiniSearchIndex(resourcesData, ['title', 'description', 'type', 'areas', 'topics', 'url', 'date']);
+}
+
+export function searchContent(query) {
+    if (!query || query.trim().length < 2) {
+        return { artifacts: [], resources: [] };
+    }
+    
+    const artifactResults = miniSearch.search(query, {
+        prefix: true,
+        fuzzy: 0.2,
+        boost: { title: 2, description: 1 }
+    });
+    
+    const resourceResults = miniSearchResources.search(query, {
+        prefix: true,
+        fuzzy: 0.2,
+        boost: { title: 2, description: 1 }
+    });
+    
+    return {
+        artifacts: artifactResults, // Show all results, not limited to 5
+        resources: resourceResults
+    };
+}
+
+// Helper functions
+function getAreaDisplayName(area) {
+    return areasData[area]?.title || area;
+}
+
+function getSubAreaDisplayName(areaId, subArea) {
+    const area = areasData[areaId];
+    if (!area || !area.subAreas) return subArea;
+    const subAreaData = area.subAreas[subArea];
+    return typeof subAreaData === 'string' ? subAreaData : subAreaData?.name || subArea;
+}
+
+// Search UI
+export function initializeSearchUI(artifactsData) {
+    initializeSearch(artifactsData).then(() => {
+        console.log('Search initialized');
+    });
+    
+    const searchInput = document.getElementById('search-input');
+    const searchResults = document.getElementById('search-results');
+    
+    if (!searchInput || !searchResults) return;
+    
+    let searchTimeout;
+    
+    // Function to perform search
+    function performSearch() {
+        const query = searchInput.value.trim();
+        
+        if (query.length < 2) {
+            searchResults.innerHTML = `<div class="text-gray-500 text-center py-8"><p>Enter a search term...</p></div>`;
+            return;
+        }
+        
+        const results = searchContent(query);
+        displaySearchResults(results, query);
+    }
+    
+    // Handle input events (typing)
+    searchInput.addEventListener('input', (e) => {
+        clearTimeout(searchTimeout);
+        const query = e.target.value.trim();
+        
+        if (query.length < 2) {
+            searchResults.innerHTML = `<div class="text-gray-500 text-center py-8"><p>Enter a search term...</p></div>`;
+            return;
+        }
+        
+        // Debounce search
+        searchTimeout = setTimeout(() => {
+            performSearch();
+        }, 300);
+    });
+    
+    // Handle Enter key (immediate search)
+    searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            clearTimeout(searchTimeout);
+            performSearch();
+        }
+    });
+}
+
+// Update the displaySearchResults function in search.js
+export function displaySearchResults(results, query) {
+    const { artifacts, resources } = results;
+    const totalResults = artifacts.length + resources.length;
+    
+    if (totalResults === 0) {
+        document.getElementById('search-results').innerHTML = `
+            <div class="text-gray-500 text-center py-8"><p>No results found for "${query}"</p></div>
+        `;
+        return;
+    }
+    
+    let html = `<div class="text-sm text-gray-600 mb-4">
+        Found ${totalResults} results (${artifacts.length} writings, ${resources.length} resources)
+    </div>`;
+    
+    // Display artifacts with collapsible header
+    if (artifacts.length > 0) {
+        html += `
+            <div class="mb-4">
+                <button onclick="toggleCategory('artifacts')" class="flex items-center justify-between w-full p-2 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors">
+                    <h4 class="font-semibold text-gray-900">Writings (${artifacts.length})</h4>
+                    <svg id="artifacts-arrow" class="w-4 h-4 text-gray-600 transform transition-transform" style="transform: rotate(0deg);">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </button>
+                <div id="artifacts-content" class="space-y-2 mt-2">
+        `;
+        
+        artifacts.forEach(result => {
+            const score = Math.round(result.score * 100);
+            
+            // Create area links
+            const areaLinks = result.areas ? result.areas.split(' ').map(area => {
+                const areaData = areasData[area];
+                if (!areaData) return '';
+                const colorClass = areaData?.colors?.bg || 'bg-blue-100';
+                const textColorClass = areaData?.colors?.text || 'text-blue-800';
+                return `<a href="/${area}#overview" class="text-xs px-2 py-1 ${colorClass} ${textColorClass} rounded hover:opacity-80 transition-opacity">${areaData?.title || area}</a>`;
+            }).filter(link => link).join('') : '';
+            
+            // Create sub-area links
+            const subAreaLinks = result.topics ? result.topics.split(' ').map(topic => {
+                const primaryArea = result.areas?.split(' ')[0] || 'efficiency';
+                const areaData = areasData[primaryArea];
+                if (!areaData || !areaData.subAreas) return '';
+                
+                const subAreaData = areaData.subAreas[topic];
+                if (!subAreaData) return '';
+                
+                const subAreaName = typeof subAreaData === 'string' ? subAreaData : subAreaData?.name || topic;
+                const colorClass = subAreaData?.color || 'bg-gray-100 text-gray-800';
+                
+                return `<a href="/${primaryArea}#${topic}" class="text-xs px-2 py-1 ${colorClass} rounded hover:opacity-80 transition-opacity">${subAreaName}</a>`;
+            }).filter(link => link).join('') : '';
+            
+            html += `
+                <div class="p-3 bg-gray-50 rounded-lg border">
+                    <div class="flex items-center justify-between mb-2">
+                        <h5 class="font-medium text-sm text-gray-900">${result.title}</h5>
+                        <div class="flex items-center gap-2">
+                            <span class="text-xs text-gray-500">${score}%</span>
+                            <a href="${result.url}" target="_blank" class="text-gray-400 hover:text-gray-600 transition-colors">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2 mb-2 text-xs text-gray-600">
+                        <span class="px-2 py-1 bg-gray-200 text-gray-700 rounded">${result.type}</span>
+                        <span>${result.date}</span>
+                    </div>
+                    <div class="flex flex-wrap gap-1">
+                        ${areaLinks}
+                        ${subAreaLinks}
+                    </div>
+                </div>
+            `;
+        });
+        
+        html += `</div></div>`;
+    }
+    
+    // Display resources with collapsible header
+    if (resources.length > 0) {
+        html += `
+            <div class="mb-4">
+                <button onclick="toggleCategory('resources')" class="flex items-center justify-between w-full p-2 bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
+                    <h4 class="font-semibold text-gray-900">Resources (${resources.length})</h4>
+                    <svg id="resources-arrow" class="w-4 h-4 text-gray-600 transform transition-transform" style="transform: rotate(0deg);">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </button>
+                <div id="resources-content" class="space-y-2 mt-2">
+        `;
+        
+        resources.forEach(result => {
+            const score = Math.round(result.score * 100);
+            
+            // Create area links for resources
+            const areaLinks = result.areas ? result.areas.split(' ').map(area => {
+                const areaData = areasData[area];
+                if (!areaData) return '';
+                const colorClass = areaData?.colors?.bg || 'bg-green-100';
+                const textColorClass = areaData?.colors?.text || 'text-green-800';
+                return `<a href="/${area}#overview" class="text-xs px-2 py-1 ${colorClass} ${textColorClass} rounded hover:opacity-80 transition-opacity">${areaData?.title || area}</a>`;
+            }).filter(link => link).join('') : '';
+            
+            // Create sub-area links for resources
+            const subAreaLinks = result.topics ? result.topics.split(' ').map(topic => {
+                const primaryArea = result.areas?.split(' ')[0] || 'efficiency';
+                const areaData = areasData[primaryArea];
+                if (!areaData || !areaData.subAreas) return '';
+                
+                const subAreaData = areaData.subAreas[topic];
+                if (!subAreaData) return '';
+                
+                const subAreaName = typeof subAreaData === 'string' ? subAreaData : subAreaData?.name || topic;
+                const colorClass = subAreaData?.color || 'bg-gray-100 text-gray-800';
+                
+                return `<a href="/${primaryArea}#${topic}" class="text-xs px-2 py-1 ${colorClass} rounded hover:opacity-80 transition-opacity">${subAreaName}</a>`;
+            }).filter(link => link).join('') : '';
+            
+            html += `
+                <div class="p-3 bg-gray-50 rounded-lg border">
+                    <div class="flex items-center justify-between mb-2">
+                        <h5 class="font-medium text-sm text-gray-900">${result.title}</h5>
+                        <div class="flex items-center gap-2">
+                            <span class="text-xs text-gray-500">${score}%</span>
+                            <a href="${result.url}" target="_blank" class="text-gray-400 hover:text-gray-600 transition-colors">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2 mb-2 text-xs text-gray-600">
+                        <span class="px-2 py-1 bg-gray-200 text-gray-700 rounded">${result.type}</span>
+                        <span>${result.date}</span>
+                    </div>
+                    <div class="flex flex-wrap gap-1">
+                        ${areaLinks}
+                        ${subAreaLinks}
+                    </div>
+                </div>
+            `;
+        });
+        
+        html += `</div></div>`;
+    }
+    
+    document.getElementById('search-results').innerHTML = html;
+}
+
+// Add this function to handle category toggling
+window.toggleCategory = function(category) {
+    const content = document.getElementById(`${category}-content`);
+    const arrow = document.getElementById(`${category}-arrow`);
+    
+    if (content.style.display === 'none') {
+        content.style.display = 'block';
+        arrow.style.transform = 'rotate(0deg)';
+    } else {
+        content.style.display = 'none';
+        arrow.style.transform = 'rotate(-90deg)';
+    }
+};

js/utils/sidebar.js

@@ -0,0 +1,57 @@
+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>
+    `;
+}