Upload 2 files

js/alpine-init.js

@@ -0,0 +1,190 @@
+// alpine-init.js - Alpine.js initialization and global stores
+// Navigation data is loaded globally in index.html
+
+// Alpine.js data stores and components
+document.addEventListener('alpine:init', () => {
+    // Use navigation data from global scope
+    const navigationAreas = window.navigationAreas || [];
+
+    // Create a lookup map for easy access by area ID
+    const areaTopicsMap = {};
+    navigationAreas.forEach(area => {
+        areaTopicsMap[area.id] = {
+            title: area.navTitle,
+            topics: area.topics.map(topic => ({
+                id: topic.id,
+                name: topic.navName
+            }))
+        };
+    });
+    
+    // Global navigation state
+    Alpine.store('navigation', {
+        currentArea: null,
+        currentTopic: null,
+        currentPage: null,
+        
+        setArea(area) {
+            this.currentArea = area;
+            this.updateTopicNav();
+        },
+        
+        setTopic(topic) {
+            this.currentTopic = topic;
+            this.updateTopicNav();
+        },
+        
+        setPage(page) {
+            this.currentPage = page;
+            this.updateTopicNav();
+        },
+        
+        updateTopicNav() {
+            // Trigger update in topic navigation component
+            if (window.Alpine) {
+                const event = new CustomEvent('navigation-updated', {
+                    detail: { 
+                        area: this.currentArea, 
+                        topic: this.currentTopic,
+                        page: this.currentPage
+                    }
+                });
+                window.dispatchEvent(event);
+            }
+        }
+    });
+    
+    // Mobile Topic Navigation Component
+    // Uses navigation data generated from areas.js
+    Alpine.data('mobileTopicNav', () => ({
+        areas: navigationAreas.map(area => ({
+            id: area.id,
+            title: area.navTitle,
+            topics: area.topics.map(topic => ({
+                id: topic.id,
+                name: topic.navName
+            }))
+        }))
+    }));
+    
+    // Home Hover Component
+    Alpine.data('homeHover', () => ({
+        homeHovered: false,
+        
+        setHomeHover(state) {
+            this.homeHovered = state;
+            window.dispatchEvent(new CustomEvent('home-hovered', { detail: { hovered: state } }));
+        }
+    }));
+    
+    // Area Hover Component (for showing topics on hover)
+    Alpine.data('areaHover', () => ({
+        hoveredArea: null,
+        // Make navigation areas available to the template
+        areas: navigationAreas,
+        
+        setHover(area) {
+            this.hoveredArea = area;
+            this.homeHovered = false; // Clear home hover when hovering area
+            // Trigger update in topic navigation
+            window.dispatchEvent(new CustomEvent('area-hovered', { detail: { area } }));
+            window.dispatchEvent(new CustomEvent('home-hovered', { detail: { hovered: false } }));
+        },
+        
+        clearAllHover() {
+            this.hoveredArea = null;
+            this.homeHovered = false;
+            window.dispatchEvent(new CustomEvent('area-hovered', { detail: { area: null } }));
+            window.dispatchEvent(new CustomEvent('home-hovered', { detail: { hovered: false } }));
+        },
+        
+        isActiveArea(area) {
+            return window.router && window.router.currentArea === area;
+        }
+    }));
+    
+    // Sub-Navigation Component (combines Home and Area menus)
+    Alpine.data('subNavigation', () => ({
+        // Area state
+        areaId: null,
+        areaTitle: '',
+        topics: [],
+        currentTopic: null,
+        hoveredArea: null,
+        
+        // Home state
+        homeHovered: false,
+        isHomePage: false,
+        
+        // Computed properties
+        get showHomeMenu() {
+            // Show home menu if we're hovering over Home OR if we're on the home page
+            return this.homeHovered || this.isHomePage;
+        },
+        
+        get showAreaMenu() {
+            // Show area menu if we're hovering over an area OR if we're on an area page
+            // BUT hide if we're showing the home menu
+            return (this.areaId !== null || this.hoveredArea !== null) && !this.showHomeMenu;
+        },
+        
+        get displayAreaId() {
+            return this.hoveredArea || this.areaId;
+        },
+        
+        get displayAreaTitle() {
+            const area = this.hoveredArea || this.areaId;
+            return area && areaTopicsMap[area] ? areaTopicsMap[area].title : '';
+        },
+        
+        get displayTopics() {
+            const area = this.hoveredArea || this.areaId;
+            return area && areaTopicsMap[area] ? areaTopicsMap[area].topics : [];
+        },
+        
+        init() {
+            // Listen for navigation updates
+            window.addEventListener('navigation-updated', (e) => {
+                this.updateFromRouter(e.detail.area, e.detail.topic, e.detail.page);
+            });
+            
+            // Listen for area hover
+            window.addEventListener('area-hovered', (e) => {
+                this.hoveredArea = e.detail.area;
+            });
+            
+            // Listen for home hover
+            window.addEventListener('home-hovered', (e) => {
+                this.homeHovered = e.detail.hovered;
+            });
+            
+            // Initial update from router
+            if (window.router) {
+                this.updateFromRouter(
+                    window.router.currentArea, 
+                    window.router.currentTopic,
+                    window.router.currentPage
+                );
+            }
+        },
+        
+        updateFromRouter(area, topic, page) {
+            // Update home page status
+            this.isHomePage = page === 'home' && !area;
+            
+            // Update area and topic
+            if (area && areaTopicsMap[area]) {
+                this.areaId = area;
+                this.areaTitle = areaTopicsMap[area].title;
+                this.topics = areaTopicsMap[area].topics;
+                this.currentTopic = topic || null;
+            } else {
+                this.areaId = null;
+                this.areaTitle = '';
+                this.topics = [];
+                this.currentTopic = null;
+            }
+        }
+    }));
+});
+

js/main.js

@@ -26,7 +26,7 @@ export function createTeamMember(name, role, hfUsername, tags) {
             <div class="flex-shrink-0">
                 <div class="w-14 h-14 rounded-full overflow-hidden bg-gradient-to-br from-${color}-400 to-${color}-600 flex items-center justify-center relative">
                     <img 
-                        src="images/${hfUsername}.jpeg" 
+                        src="/images/${hfUsername}.jpeg" 
                         alt="${name}" 
                         class="w-full h-full object-cover"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
@@ -139,72 +139,26 @@ document.addEventListener('DOMContentLoaded', async function() { // Mark as asyn
     // No need to call initializeTeamMembers, initializeHomeAreaCards, etc. here
     // as they will be called by the router when loading the home page
     
-    // Sidebar toggle functionality
+    // Search sidebar toggle functionality
     const searchToggle = document.getElementById('search-toggle');
     const searchSidebar = document.getElementById('search-sidebar');
     const searchClose = document.getElementById('search-close');
     const mainContent = document.getElementById('main-content');
     const overlay = document.getElementById('sidebar-overlay');
-    // Left sidebar toggle functionality
-    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');
-        
-        if (isOpen) {
-            // 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 - 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);
-        }
-    }
-
-    if (sidebarToggle) sidebarToggle.addEventListener('click', toggleLeftSidebar)
 
     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');
-            } else {
-                mainContent.style.marginLeft = '0';
-                mainContent.classList.remove('mr-80');
-            }
+            mainContent.classList.remove('mr-80');
             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');
-            } else {
-                mainContent.style.marginLeft = '0';
-                mainContent.classList.add('mr-80');
-            }
+            mainContent.classList.add('mr-80');
             overlay.classList.remove('hidden');
         }
     }
@@ -213,34 +167,4 @@ document.addEventListener('DOMContentLoaded', async function() { // Mark as asyn
     if (searchClose) searchClose.addEventListener('click', toggleSearch);
     if (overlay) overlay.addEventListener('click', toggleSearch);
 
-    // Scroll spy for left navigation
-    const sections = document.querySelectorAll('section[id], div[id]');
-    const navLinks = document.querySelectorAll('.page-nav-link');
-
-    function updateActiveNavigation() {
-        let current = '';
-        const scrollPos = window.scrollY + 150;
-        
-        sections.forEach(section => {
-            const sectionTop = section.offsetTop;
-            const sectionHeight = section.offsetHeight;
-            
-            if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
-                current = section.getAttribute('id');
-            }
-        });
-
-        navLinks.forEach(link => {
-            link.classList.remove('text-blue-600', 'bg-blue-50');
-            link.classList.add('text-gray-700');
-            
-            if (link.getAttribute('href') === `#${current}`) {
-                link.classList.remove('text-gray-700');
-                link.classList.add('text-blue-600', 'bg-blue-50');
-            }
-        });
-    }
-
-    window.addEventListener('scroll', updateActiveNavigation);
-    updateActiveNavigation(); // Initial call
 });