Upload router.js

js/utils/router.js

@@ -1,7 +1,7 @@
 // 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 { renderHomePage } from '../pages/HomePage.js';
+import { renderAreaPage } from '../pages/AreaPage.js';
+import { renderResourcesPage } from '../pages/ResourcesPage.js';
 import { scrollToSection } from './dom.js';
 
 class Router {
@@ -16,13 +16,15 @@ class Router {
             '/about': 'resources'
         };
         
+        this.areas = ['efficiency', 'personal', 'rights', 'ecosystems'];
         this.currentPage = null;
+        this.currentArea = null;
+        this.currentTopic = null;
         this.init();
     }
 
     init() {
         // Handle initial page load
-        console.log('Initializing router');
         this.loadPage(window.location.pathname);
         
         // Handle browser back/forward
@@ -32,7 +34,7 @@ class Router {
             const fullUrl = path + hash;
             
             // Use navigateToUrl to ensure proper scroll behavior
-            this.navigateToUrl(fullUrl);
+            this.navigateToUrl(fullUrl, false); // false = don't push to history
         });
         
         // Handle hash changes for navigation
@@ -55,21 +57,57 @@ class Router {
     }
 
     async loadPage(path) {
-        const route = this.routes[path] || 'home';
+        // Parse path to support /area/topic format
+        const pathParts = path.split('/').filter(p => p);
+        let route, area, topic;
         
-        if (this.currentPage === route) {
-            // Same page, no need to reload
-            return;
+        if (pathParts.length === 0) {
+            // Root path
+            route = 'home';
+        } else if (pathParts.length === 1) {
+            // Single segment: /efficiency or /home
+            route = this.routes[path] || 'home';
+            if (this.areas.includes(pathParts[0])) {
+                area = pathParts[0];
+            }
+        } else if (pathParts.length === 2 && this.areas.includes(pathParts[0])) {
+            // Two segments: /efficiency/environment
+            area = pathParts[0];
+            topic = pathParts[1];
+            route = area;
+        } else {
+            // Unknown route, default to home
+            route = 'home';
         }
         
+        // Update current state
         this.currentPage = route;
-
-        console.log('Loading page:', route);
+        this.currentArea = area || null;
+        this.currentTopic = topic || null;
+        
+        // Update Alpine.js store if available
+        if (window.Alpine && window.Alpine.store) {
+            const navStore = window.Alpine.store('navigation');
+            if (navStore) {
+                navStore.currentPage = this.currentPage;
+                navStore.currentArea = this.currentArea;
+                navStore.currentTopic = this.currentTopic;
+                navStore.updateTopicNav();
+            }
+        }
+        
+        // Dispatch event for header and other components
+        window.dispatchEvent(new CustomEvent('navigation-changed', {
+            detail: {
+                currentPage: this.currentPage,
+                currentArea: this.currentArea,
+                currentTopic: this.currentTopic
+            }
+        }));
+        
         // Handle background for all pages
         await this.setPageBackground(route);
 
-        console.log('Background set for:', route);
-
         try {
             switch (route) {
                 case 'home':
@@ -79,7 +117,7 @@ class Router {
                 case 'personal':
                 case 'rights':
                 case 'ecosystems':
-                    await this.loadAreaPage(route);
+                    await this.loadAreaPage(route, topic);
                     break;
                 case 'resources':
                     await this.loadResourcesPage();
@@ -94,13 +132,10 @@ class Router {
             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();
         
@@ -131,7 +166,7 @@ class Router {
         
         backgroundDiv.innerHTML = `
             <!-- Background Image Main Content -->
-            <img src="images/${backgroundImage}" alt="" class="w-full h-full object-cover pointer-events-none">
+            <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}
@@ -167,39 +202,28 @@ class Router {
 
     async loadHomePage() {
         const mainContent = document.getElementById('main-content');
-        const leftSidebar = document.getElementById('left-sidebar');
         
         if (!mainContent) {
             return;
         }
 
         try {
-            // Get page content and sidebar
+            // Get page content
             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();
-            }
+            // Update content - render directly to main content
+            mainContent.innerHTML = homePage.content;
             
             // 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 = `
+            mainContent.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>
@@ -208,42 +232,34 @@ class Router {
         }
     }
 
-    async loadAreaPage(area) {
+    async loadAreaPage(area, topic = null) {
         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);
+            // Get area page content (pass topic parameter)
+            const areaPage = renderAreaPage(area, topic);
             
-            // Update content
-            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
-            contentContainer.innerHTML = areaPage.content;
-            
-            // Update sidebar
-            if (leftSidebar) {
-                leftSidebar.innerHTML = getAreaPageSidebar(area);
-            }
+            // Update content - render directly to main content (no wrapper needed)
+            mainContent.innerHTML = areaPage.content;
             
             // Initialize page
             if (areaPage.init) {
                 areaPage.init();
             }
             
-            // Initialize left sidebar attribution after content is loaded
-            initializeLeftSidebarAttribution();
+            // Scroll to top of page after content loads
+            window.scrollTo({ top: 0, behavior: 'smooth' });
 
         } 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">
+            mainContent.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8 mx-4">
                     <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>
@@ -255,36 +271,25 @@ class Router {
 
     async loadResourcesPage() {
         const mainContent = document.getElementById('main-content');
-        const leftSidebar = document.getElementById('left-sidebar');
         
         if (!mainContent) return;
 
         try {
-            // Get resources page content and sidebar
+            // Get resources page content
             const resourcesPage = renderResourcesPage();
             
-            // Update content
-            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
-            contentContainer.innerHTML = resourcesPage.content;
-            
-            // Update sidebar
-            if (leftSidebar) {
-                leftSidebar.innerHTML = getResourcesPageSidebar();
-            }
+            // Update content - render directly to main content
+            mainContent.innerHTML = resourcesPage.content;
             
             // 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">
+            mainContent.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8 mx-4">
                     <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>
@@ -298,15 +303,15 @@ class Router {
         // 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');
+            // Remove active state
+            link.classList.remove('text-blue-600', 'bg-blue-50', 'font-semibold');
             
             const href = link.getAttribute('href');
+            // Add active state to current page
             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');
+                link.classList.add('text-blue-600', 'bg-blue-50', 'font-semibold');
             }
         });
     }
@@ -323,9 +328,13 @@ class Router {
             
             // 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
+                // Check if this is a known SPA route or area/topic route
                 const path = href.split('#')[0];
-                if (this.routes[path]) {
+                const pathParts = path.split('/').filter(p => p);
+                const isKnownRoute = this.routes[path] || 
+                                    (pathParts.length === 2 && this.areas.includes(pathParts[0]));
+                
+                if (isKnownRoute) {
                     e.preventDefault();
                     this.navigateToUrl(href);
                 }
@@ -338,12 +347,14 @@ class Router {
         });
     }
 
-    navigateToUrl(fullUrl) {
+    navigateToUrl(fullUrl, pushState = true) {
         // Parse URL into path and hash
         const [path, hash] = fullUrl.split('#');
         
-        // Update browser URL
-        window.history.pushState({}, '', fullUrl);
+        // Update browser URL if needed
+        if (pushState) {
+            window.history.pushState({}, '', fullUrl);
+        }
         
         // Load page and then handle hash
         this.loadPage(path).then(() => {
@@ -363,47 +374,29 @@ class Router {
 // Export router instance
 export const router = new Router();
 
+// Make router globally accessible for Alpine.js and other scripts
+window.router = 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;
+    const rightSidebarWidth = searchSidebar && !searchSidebar.classList.contains('translate-x-full') ? searchSidebar.offsetWidth : 0;
 
     backgroundDiv.style.cssText = `
         top: ${headerHeight};
-        left: ${leftSidebarWidth}px;
+        left: 0;
         right: ${rightSidebarWidth}px;
         bottom: 0;
-        width: calc(100% - ${leftSidebarWidth + rightSidebarWidth}px);
+        width: calc(100% - ${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 */
+        transition: width 0.3s ease-in-out, right 0.3s ease-in-out;
     `;
 }
 
 // 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 };