feat: Implement site header with responsive navigation, mobile menu functionality.

_includes/header.html

@@ -1,29 +1,55 @@
 <header class="sticky top-0 w-full z-50 bg-white border-b border-gray-200">
-<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-        
+    <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+
         <!-- Logo -->
         <a href="{{ '/' | relative_url }}" class="flex items-center gap-3 font-semibold text-lg text-gray-900">
             <div class="w-9 h-9 bg-white rounded-lg shadow-sm flex items-center justify-center overflow-hidden">
-                <img src="{{ site.baseurl }}/assets/images/blt-logo.png"
-                     alt="BLT Logo"
-                     class="w-full h-full object-contain p-1">
+                <img src="{{ site.baseurl }}/assets/images/blt-logo.png" alt="BLT Logo"
+                    class="w-full h-full object-contain p-1">
             </div>
             <span>{{ site.university.name | default: "BLT University" }}</span>
         </a>
 
-        <!-- Navigation -->
+        <!-- Navigation (Desktop) -->
         <nav class="hidden md:flex gap-8 text-sm font-medium text-gray-600">
             {% for item in site.navigation %}
-                <a href="{{ item.url | relative_url }}"
-                   class="{% if page.url == item.url %}
+            <a href="{{ item.url | relative_url }}" class="{% if page.url == item.url %}
                           text-bltRed border-b-2 border-bltRed pb-1
                           {% else %}
                           hover:text-gray-900 transition-colors
                           {% endif %}">
-                    {{ item.title }}
-                </a>
+                {{ item.title }}
+            </a>
             {% endfor %}
         </nav>
 
+        <!-- Mobile Menu Button -->
+        <button id="mobile-menu-button"
+            class="md:hidden p-2 text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-bltRed/20 rounded-md transition-all duration-200"
+            aria-label="Toggle navigation">
+            <svg id="menu-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+            </svg>
+            <svg id="close-icon" class="hidden w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+
+    </div>
+
+    <!-- Mobile Menu -->
+    <div id="mobile-menu"
+        class="hidden md:hidden absolute top-16 left-0 w-full bg-white border-b border-gray-100 shadow-xl overflow-hidden transition-all duration-300 ease-in-out opacity-0 max-h-0">
+        <nav class="flex flex-col gap-1 p-4 text-sm font-medium text-gray-600">
+            {% for item in site.navigation %}
+            <a href="{{ item.url | relative_url }}" class="px-4 py-3 rounded-lg transition-all duration-200 {% if page.url == item.url %}
+                          bg-bltRedLight text-bltRed font-semibold
+                          {% else %}
+                          hover:bg-gray-50 hover:text-gray-900
+                          {% endif %}">
+                {{ item.title }}
+            </a>
+            {% endfor %}
+        </nav>
     </div>
 </header>

assets/js/main.js

@@ -1,58 +1,58 @@
 // BLT University JavaScript
 
-document.addEventListener('DOMContentLoaded', function() {
-    
+document.addEventListener('DOMContentLoaded', function () {
+
     // Course Filtering
     const categoryFilter = document.getElementById('category-filter');
     const levelFilter = document.getElementById('level-filter');
     const searchFilter = document.getElementById('search-filter');
     const coursesGrid = document.getElementById('courses-grid');
     const noResults = document.getElementById('no-results');
-    
+
     if (categoryFilter && levelFilter && searchFilter && coursesGrid) {
         function filterCourses() {
             const categoryValue = categoryFilter.value.toLowerCase();
             const levelValue = levelFilter.value.toLowerCase();
             const searchValue = searchFilter.value.toLowerCase();
-            
+
             const courses = coursesGrid.getElementsByClassName('course-card');
             let visibleCount = 0;
-            
+
             Array.from(courses).forEach(course => {
                 const courseCategory = course.getAttribute('data-category');
                 const courseLevel = course.getAttribute('data-level');
                 const courseSearch = course.getAttribute('data-search');
-                
+
                 const categoryMatch = !categoryValue || courseCategory === categoryValue;
                 const levelMatch = !levelValue || courseLevel === levelValue;
                 const searchMatch = !searchValue || courseSearch.includes(searchValue);
-                
+
                 if (categoryMatch && levelMatch && searchMatch) {
                     course.style.display = '';
                     visibleCount++;
                 } else {
                     course.style.display = 'none';
                 }
             });
-            
+
             if (noResults) {
                 noResults.style.display = visibleCount === 0 ? 'block' : 'none';
             }
         }
-        
+
         categoryFilter.addEventListener('change', filterCourses);
         levelFilter.addEventListener('change', filterCourses);
         searchFilter.addEventListener('input', filterCourses);
     }
-    
+
     // Parse URL parameters for enrollment
     const urlParams = new URLSearchParams(window.location.search);
     const courseParam = urlParams.get('course');
     const titleParam = urlParams.get('title');
-    
+
     if (courseParam && window.location.pathname.includes('/enroll/')) {
         console.log('Enrolling in course:', courseParam, titleParam);
-        
+
         // Update the enrollment button to prefill the title if available
         if (titleParam) {
             const enrollButton = document.querySelector('[data-enrollment-button]');
@@ -64,7 +64,7 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         }
     }
-    
+
     // Smooth scroll for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
@@ -78,10 +78,63 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     });
-
+
+    // Mobile Menu Toggle
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const menuIcon = document.getElementById('menu-icon');
+    const closeIcon = document.getElementById('close-icon');
+
+    if (mobileMenuButton && mobileMenu) {
+        mobileMenuButton.addEventListener('click', () => {
+            const isHidden = mobileMenu.classList.contains('hidden');
+
+            if (isHidden) {
+                // Open menu
+                mobileMenu.classList.remove('hidden');
+                // Small delay to allow 'hidden' removal to take effect before animating
+                setTimeout(() => {
+                    mobileMenu.classList.remove('max-h-0');
+                    mobileMenu.classList.remove('opacity-0');
+                    mobileMenu.classList.add('max-h-[500px]');
+                    mobileMenu.classList.add('opacity-100');
+                }, 10);
+                menuIcon.classList.add('hidden');
+                closeIcon.classList.remove('hidden');
+            } else {
+                // Close menu
+                mobileMenu.classList.remove('max-h-[500px]');
+                mobileMenu.classList.remove('opacity-100');
+                mobileMenu.classList.add('max-h-0');
+                mobileMenu.classList.add('opacity-0');
+
+                // Wait for transition to finish before hiding
+                setTimeout(() => {
+                    mobileMenu.classList.add('hidden');
+                }, 300);
+
+                menuIcon.classList.remove('hidden');
+                closeIcon.classList.add('hidden');
+            }
+        });
+
+        // Close menu on resize if screen becomes desktop-sized
+        window.addEventListener('resize', () => {
+            if (window.innerWidth >= 768) {
+                mobileMenu.classList.add('hidden');
+                mobileMenu.classList.add('max-h-0');
+                mobileMenu.classList.add('opacity-0');
+                mobileMenu.classList.remove('max-h-[500px]');
+                mobileMenu.classList.remove('opacity-100');
+                menuIcon.classList.remove('hidden');
+                closeIcon.classList.add('hidden');
+            }
+        });
+    }
+
     // Add active class to current navigation item
     const currentPath = window.location.pathname;
-    document.querySelectorAll('.site-navigation a').forEach(link => {
+    document.querySelectorAll('.site-navigation a, #mobile-menu a').forEach(link => {
         if (link.getAttribute('href') === currentPath) {
             link.classList.add('active');
         }