Spaces:

hfmlsoc
/

overview

Running

App Files Files Community

Yacine Jernite commited on 28 days ago

Commit

f07b5d3

1 Parent(s): 1238bb5

sticky_nav

Browse files

Files changed (5) hide show

js/components/PageNavigation.js +28 -14
js/pages/AreaPage.js +2 -0
js/pages/HomePage.js +2 -0
js/utils/stickyNavigation.js +59 -0
styles.css +85 -0

js/components/PageNavigation.js CHANGED Viewed

@@ -13,20 +13,34 @@ export function renderPageNavigation(label, items) {
     }
     return `
-        <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
-            <div class="bg-white/85 backdrop-blur-sm shadow-md rounded-lg px-6 py-4 w-full border border-gray-200" style="max-width: min(90%, 1400px); margin: 0 auto;">
-                <div class="flex items-center gap-3 overflow-x-auto">
-                    <span class="text-gray-600 font-semibold whitespace-nowrap text-base">${label}</span>
-                    ${items.map((item, index) => {
-                        const activeClasses = item.active
-                            ? 'text-blue-600 font-semibold underline decoration-2 underline-offset-2'
-                            : 'text-gray-700 hover:text-blue-600';
-                        return `
-                            ${index > 0 ? '<span class="text-gray-300">•</span>' : ''}
-                            <a href="${item.href}" class="px-4 py-2 text-base font-medium ${activeClasses} hover:bg-blue-50 rounded transition-colors whitespace-nowrap">${item.text}</a>
-                        `;
-                    }).join('')}
                 </div>
             </div>
         </section>

     }
     return `
+        <section class="page-navigation mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div id="nav-container" class="bg-white/85 backdrop-blur-sm shadow-md rounded-lg px-6 py-4 w-full border border-gray-200" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <div class="flex items-center justify-between gap-3">
+                    <!-- Navigation items -->
+                    <div id="nav-items" class="flex items-center gap-3 overflow-x-auto flex-1">
+                        <span class="text-gray-600 font-semibold whitespace-nowrap text-base">${label}</span>
+                        ${items.map((item, index) => {
+                            const activeClasses = item.active
+                                ? 'text-blue-600 font-semibold underline decoration-2 underline-offset-2'
+                                : 'text-gray-700 hover:text-blue-600';
+                            return `
+                                ${index > 0 ? '<span class="text-gray-300">•</span>' : ''}
+                                <a href="${item.href}" class="px-4 py-2 text-base font-medium ${activeClasses} hover:bg-blue-50 rounded whitespace-nowrap">${item.text}</a>
+                            `;
+                        }).join('')}
+                    </div>
+                    <!-- Hamburger toggle -->
+                    <button id="nav-toggle"
+                            class="flex-shrink-0 p-2 rounded-lg hover:bg-gray-100"
+                            onclick="toggleNavigation()"
+                            aria-label="Toggle navigation menu"
+                            aria-expanded="true">
+                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </button>
                 </div>
             </div>
         </section>

js/pages/AreaPage.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { getFeaturedArtifacts } from '../init.js';
 import { createArtifactCarousel } from '../components/Carousel.js';
 import { renderAreaNavigation } from '../components/PageNavigation.js';
 import { renderContentSection, renderOpennessCallout } from '../components/ContentSection.js';
 // Use global areasData (loaded in index.html <head>)
 const areasData = window.areasData;
@@ -109,6 +110,7 @@ function renderFullAreaPage(area, areaId, initialTopicId = null) {
             topics.forEach(topic => {
                 initializeTopicArtifactsCarousel(areaId, topic.id);
             });
         }
     };
 }

 import { createArtifactCarousel } from '../components/Carousel.js';
 import { renderAreaNavigation } from '../components/PageNavigation.js';
 import { renderContentSection, renderOpennessCallout } from '../components/ContentSection.js';
+import { initializeStickyNavigation } from '../utils/stickyNavigation.js';
 // Use global areasData (loaded in index.html <head>)
 const areasData = window.areasData;
             topics.forEach(topic => {
                 initializeTopicArtifactsCarousel(areaId, topic.id);
             });
+            initializeStickyNavigation('nav-container');
         }
     };
 }

js/pages/HomePage.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { teamMembers } from '../data/team.js';
 import { renderAreaCard } from '../components/Card.js';
 import { renderHomeNavigation } from '../components/PageNavigation.js';
 import { renderContentSection, renderOpennessCallout } from '../components/ContentSection.js';
 // Use global areasData and backgrounds (loaded in index.html <head>)
 const areasData = window.areasData;
@@ -94,6 +95,7 @@ export function renderHomePage() {
             initializeHomeAreaCards();
             initializeArtifactCarousels();
             initializeBackgroundAttribution();
         }
     };
 }

 import { renderAreaCard } from '../components/Card.js';
 import { renderHomeNavigation } from '../components/PageNavigation.js';
 import { renderContentSection, renderOpennessCallout } from '../components/ContentSection.js';
+import { initializeStickyNavigation } from '../utils/stickyNavigation.js';
 // Use global areasData and backgrounds (loaded in index.html <head>)
 const areasData = window.areasData;
             initializeHomeAreaCards();
             initializeArtifactCarousels();
             initializeBackgroundAttribution();
+            initializeStickyNavigation('nav-container');
         }
     };
 }

js/utils/stickyNavigation.js ADDED Viewed

	@@ -0,0 +1,59 @@

+// stickyNavigation.js - Sticky navigation behavior and hamburger menu
+// Handles: sticky positioning on scroll + collapse/expand toggle
+/**
+ * Initializes sticky navigation behavior for a page
+ * @param {string} navElementId - ID of the navigation element (without #)
+ */
+export function initializeStickyNavigation(navElementId) {
+    const navElement = document.getElementById(navElementId);
+    if (!navElement) {
+        console.warn(`Navigation element #${navElementId} not found`);
+        return;
+    }
+    const navSection = navElement.closest('section.page-navigation');
+    if (!navSection) {
+        console.warn('Navigation section wrapper not found');
+        return;
+    }
+    // Calculate sticky threshold: when nav reaches bottom of header
+    const headerHeight = parseInt(getComputedStyle(document.documentElement)
+        .getPropertyValue('--header-height')) || 100;
+    const stickyThreshold = navSection.offsetTop - headerHeight;
+    // Scroll handler with throttling
+    let scrollTimeout;
+    const handleScroll = () => {
+        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+        navSection.classList.toggle('sticky-nav', scrollPosition >= stickyThreshold);
+    };
+    window.addEventListener('scroll', () => {
+        if (scrollTimeout) cancelAnimationFrame(scrollTimeout);
+        scrollTimeout = requestAnimationFrame(handleScroll);
+    });
+    handleScroll(); // Initial check
+}
+/**
+ * Toggle navigation visibility (hamburger menu)
+ * Exposed globally for onclick handler
+ */
+window.toggleNavigation = function() {
+    const navItems = document.getElementById('nav-items');
+    const navToggle = document.getElementById('nav-toggle');
+    const navContainer = document.getElementById('nav-container');
+    if (!navItems || !navToggle) return;
+    const isCollapsed = navItems.classList.contains('nav-collapsed');
+    // Toggle classes and ARIA attribute
+    navItems.classList.toggle('nav-collapsed', !isCollapsed);
+    navToggle.setAttribute('aria-expanded', isCollapsed ? 'true' : 'false');
+    navContainer?.classList.toggle('nav-container-collapsed', !isCollapsed);
+};

styles.css CHANGED Viewed

@@ -147,6 +147,91 @@ p {
     }
 }
 /* ============================================
    Visual Effects
    ============================================ */

     }
 }
+/* Sticky Page Navigation */
+.page-navigation {
+    transition: all 0.3s ease;
+}
+#nav-container {
+    transition: all 0.3s ease;
+}
+#nav-items {
+    transition: all 0.3s ease;
+}
+#nav-toggle {
+    transition: all 0.2s ease;
+}
+.page-navigation.sticky-nav {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    right: 0;
+    z-index: 30;
+    padding: 0.5rem 0;
+}
+.page-navigation.sticky-nav #nav-container {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    padding: 0.75rem 1.5rem;
+    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.12);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+/* Add breathing room between sticky nav and content */
+.page-navigation.sticky-nav ~ section:first-of-type,
+.page-navigation.sticky-nav ~ div:first-of-type {
+    margin-top: 0.75rem;
+}
+/* Navigation collapse/expand */
+#nav-items.nav-collapsed {
+    max-height: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    width: 0;
+}
+/* Compact container when collapsed - just the hamburger icon */
+.nav-container-collapsed {
+    padding: 0.5rem !important;
+    width: auto !important;
+    max-width: fit-content !important;
+    margin-left: auto !important;
+    margin-right: 1.5rem !important;
+}
+/* Also make the parent section compact when collapsed */
+.page-navigation.sticky-nav:has(.nav-container-collapsed) {
+    padding: 0.25rem 0;
+}
+.page-navigation.sticky-nav .nav-container-collapsed {
+    margin: 0 1.5rem 0 auto;
+}
+/* Mobile adjustments for sticky nav */
+@media (max-width: 767px) {
+    .page-navigation.sticky-nav {
+        top: var(--header-height);
+        padding: 0.25rem 0; /* Less padding on mobile */
+    }
+    .page-navigation.sticky-nav #nav-container {
+        padding: 0.5rem 1rem;
+    }
+    .page-navigation.sticky-nav ~ section:first-of-type,
+    .page-navigation.sticky-nav ~ div:first-of-type {
+        margin-top: 0.5rem; /* Less space on mobile */
+    }
+}
 /* ============================================
    Visual Effects
    ============================================ */