Upload main.js

js/main.js

@@ -1,8 +1,11 @@
 // main.js
-import { createHomeAreaCard } from './cards/HomeAreaCard.js';
-import { createArtifactSummaryCard, createArtifactCarousel } from './cards/ArtifactSummaryCard.js';
 import { teamMembers, teamTagData } from './data/team.js';
-import { router } from './router.js';
+import { initializeSearchUI } from './utils/search.js';
+import { overallBackgroundImage } from './data/areas.js';
+import { scrollToSection } from './utils/dom.js';
+import { updatePageBackgroundPosition } from './utils/router.js'; // Import the new function
+
+let allArtifactsData; // Declare a variable to hold the fetched artifacts
 
 // Team member component
 export function createTeamMember(name, role, hfUsername, tags) {
@@ -47,19 +50,7 @@ export function createTeamMember(name, role, hfUsername, tags) {
 }
 
 // Make router's scrollToSection globally available for onclick handlers
-window.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'
-        });
-    }
-};
+window.scrollToSection = scrollToSection;
 
 // Scroll to top functionality
 function scrollToTop() {
@@ -113,12 +104,36 @@ function initializeScrollToTop() {
     toggleScrollToTopButton();
 }
 
+
 // Main initialization
-document.addEventListener('DOMContentLoaded', function() {
-    // Navigation now handled by router.js
+document.addEventListener('DOMContentLoaded', async function() { // Mark as async
+    const backgroundImg = document.querySelector('#overall-background img');
+    if (backgroundImg) {
+        backgroundImg.src = `images/${overallBackgroundImage.image}`;
+        backgroundImg.alt = overallBackgroundImage.altText;
+    }
+    
+    // Fetch artifacts once
+    try {
+        const response = await fetch('/data/artifacts.json');
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        allArtifactsData = await response.json();
+        console.log('Artifacts loaded once in main.js:', allArtifactsData.length, 'items');
+    } catch (error) {
+        console.error('Failed to load artifacts in main.js:', error);
+        allArtifactsData = [];
+    }
+
+    // Make allArtifactsData globally available for other modules
+    window.allArtifacts = allArtifactsData;
     
     // Initialize scroll to top functionality
     initializeScrollToTop();
+
+    // Initialize search UI, passing the loaded artifacts
+    initializeSearchUI(allArtifactsData);
     
     // The router will handle page-specific component initialization
     // No need to call initializeTeamMembers, initializeHomeAreaCards, etc. here
@@ -134,6 +149,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const sidebarToggle = document.getElementById('sidebar-toggle');
     const leftSidebar = document.getElementById('left-sidebar');
     const mainContentEl = document.getElementById('main-content');
+    const leftSidebarBg = document.getElementById('left-sidebar-background'); // Get the background element
 
     function toggleLeftSidebar() {
         const isOpen = !leftSidebar.classList.contains('-translate-x-full');
@@ -142,10 +158,22 @@ document.addEventListener('DOMContentLoaded', function() {
             // Close sidebar
             leftSidebar.classList.add('-translate-x-full');
             mainContentEl.style.marginLeft = '0';
+            leftSidebarBg.classList.add('hidden'); // Hide the left sidebar background
+            updatePageBackgroundPosition(); // Update page background position immediately on close
         } else {
-            // Open sidebar
+            // Open sidebar - initially hide its background
+            leftSidebarBg.classList.add('hidden'); // Ensure it's hidden before animation starts
+
             leftSidebar.classList.remove('-translate-x-full');
             mainContentEl.style.marginLeft = '256px';
+            
+            // Wait for transition to end before updating background position AND showing sidebar background
+            const handleTransitionEnd = () => {
+                leftSidebarBg.classList.remove('hidden'); // Now show the left sidebar background
+                updatePageBackgroundPosition();
+                leftSidebar.removeEventListener('transitionend', handleTransitionEnd);
+            };
+            leftSidebar.addEventListener('transitionend', handleTransitionEnd);
         }
     }
 
@@ -154,9 +182,11 @@ document.addEventListener('DOMContentLoaded', function() {
     function toggleSearch() {
         const isOpen = !searchSidebar.classList.contains('translate-x-full');
         const leftSidebarOpen = !leftSidebar.classList.contains('-translate-x-full');
+        const rightSidebarBg = document.getElementById('right-sidebar-background');
         
         if (isOpen) {
             searchSidebar.classList.add('translate-x-full');
+            rightSidebarBg.classList.add('hidden');
             if (leftSidebarOpen) {
                 mainContent.style.marginLeft = '256px';
                 mainContent.classList.remove('mr-80');
@@ -167,6 +197,7 @@ document.addEventListener('DOMContentLoaded', function() {
             overlay.classList.add('hidden');
         } else {
             searchSidebar.classList.remove('translate-x-full');
+            rightSidebarBg.classList.remove('hidden');
             if (leftSidebarOpen) {
                 mainContent.style.marginLeft = '256px';
                 mainContent.classList.add('mr-80');