jekyll-theme-zer0 0.20.3 → 0.21.2

data/_includes/core/header.html

@@ -126,40 +126,44 @@
             <!-- ========================== -->
             <!-- UTILITY CONTROLS          -->
             <!-- ========================== -->
-            
-            <!-- Search Modal Toggle -->
-            <button
-                class="btn nav-search-button"
-                type="button"
-                data-bs-toggle="modal"
-                data-bs-target="#siteSearchModal"
-                data-search-toggle
-                aria-label="Open search"
-            >
-                <i class="{{site.default_icon}} bi-search"></i>
-                <span class="d-none d-lg-inline ms-1">Search</span>
-            </button>
-
-            <!-- Settings Modal Toggle -->
-            <div class="btn d-none d-lg-flex nav-settings"
-                data-bs-toggle="modal" 
-                data-bs-target="#info-section" 
-                aria-expanded="false" 
-                aria-controls="#info-section"
-                role="button">
-                <i type="button" class="{{site.default_icon}} bi-gear"></i>
-            </div>
+            <div class="navbar-utility-controls d-flex align-items-center">
+                <!-- Search Modal Toggle -->
+                <button
+                    class="btn nav-search-button"
+                    type="button"
+                    data-bs-toggle="modal"
+                    data-bs-target="#siteSearchModal"
+                    data-search-toggle
+                    aria-label="Open search"
+                    title="Search"
+                >
+                    <i class="{{site.default_icon}} bi-search"></i>
+                    <span class="nav-link-text d-none d-xl-inline ms-1">Search</span>
+                </button>
 
-            <!-- Navigation Menu Toggle - Mobile view -->
-            <div class="bd-navbar-toggle">
-                <button class="navbar-toggler p-2" 
-                        type="button" 
-                        data-bs-toggle="offcanvas" 
-                        data-bs-target="#bdNavbar" 
-                        aria-controls="bdNavbar" 
-                        aria-label="Toggle navigation">
-                    <span class="bi bi-three-dots"></span>
+                <!-- Settings Modal Toggle -->
+                <button
+                    class="btn nav-settings-button d-none d-lg-inline-flex"
+                    type="button"
+                    data-bs-toggle="modal" 
+                    data-bs-target="#info-section" 
+                    aria-label="Settings"
+                    title="Settings"
+                >
+                    <i class="{{site.default_icon}} bi-gear"></i>
                 </button>
+
+                <!-- Navigation Menu Toggle - Mobile view -->
+                <div class="bd-navbar-toggle d-lg-none">
+                    <button class="navbar-toggler p-2" 
+                            type="button" 
+                            data-bs-toggle="offcanvas" 
+                            data-bs-target="#bdNavbar" 
+                            aria-controls="bdNavbar" 
+                            aria-label="Toggle navigation">
+                        <span class="bi bi-three-dots"></span>
+                    </button>
+                </div>
             </div>
         </nav>
     </div>

data/_includes/navigation/navbar.html

@@ -34,11 +34,12 @@
                             class="nav-link"
                             href="{{ link.url | relative_url }}"
                             {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            title="{{ link.title }}"
                         >
                             {%- if link.icon -%}
-                                <i class="{{site.default_icon}} {{ link.icon }} me-2"></i>
+                                <i class="{{site.default_icon}} {{ link.icon }}"></i>
                             {%- endif -%}
-                            {{ link.title }}
+                            <span class="nav-link-text">{{ link.title }}</span>
                         </a>
 
                         <!-- Split toggle opens the dropdown (click on mobile, hover on desktop) -->
@@ -78,11 +79,12 @@
                             class="nav-link"
                             href="{{ link.url | relative_url }}"
                             {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            title="{{ link.title }}"
                         >
                             {%- if link.icon -%}
-                                <i class="{{site.default_icon}} {{ link.icon }} me-2"></i>
+                                <i class="{{site.default_icon}} {{ link.icon }}"></i>
                             {%- endif -%}
-                            {{ link.title }}
+                            <span class="nav-link-text">{{ link.title }}</span>
                         </a>
                     </li>
                 {%- endif -%}
@@ -116,271 +118,8 @@
     </div>
 </div>
 
-<!-- Styles for hover-activated dropdowns on desktop -->
-<style>
-/* Desktop: Show navigation inline in header (not offcanvas) */
-@media (min-width: 992px) {
-    /* Make offcanvas behave as regular inline content on desktop */
-    #bdNavbar {
-        position: static !important;
-        transform: none !important;
-        visibility: visible !important;
-        background: transparent !important;
-        border: none !important;
-        width: auto !important;
-        flex-grow: 0 !important;
-    }
-    
-    #bdNavbar .offcanvas-header {
-        display: none !important;
-    }
-    
-    #bdNavbar .offcanvas-body {
-        padding: 0 !important;
-        overflow: visible !important;
-    }
-    
-    /* Horizontal nav layout */
-    #bdNavbar .navbar-nav {
-        flex-direction: row !important;
-        gap: 0.25rem;
-    }
-    
-    /* Dropdown positioning - ensure it appears BELOW the nav item */
-    .nav-hover-dropdown {
-        position: relative;
-    }
-    
-    .nav-hover-dropdown > .dropdown-menu {
-        position: absolute;
-        top: 100% !important;
-        left: 0;
-        margin-top: 0.125rem !important;
-        min-width: 12rem;
-        z-index: 1050;
-    }
-    
-    /* Hover behavior for dropdowns */
-    .nav-hover-dropdown:hover > .dropdown-menu {
-        display: block;
-    }
-    
-    /* Smooth fade-in animation */
-    .nav-hover-dropdown .dropdown-menu {
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
-        display: block !important;
-    }
-    
-    .nav-hover-dropdown:hover .dropdown-menu,
-    .nav-hover-dropdown .dropdown-menu.show {
-        opacity: 1;
-        visibility: visible;
-    }
-    
-    /* Ensure dropdown toggle caret is subtle */
-    .nav-hover-dropdown .dropdown-toggle-split {
-        padding-left: 0.25rem;
-        padding-right: 0.5rem;
-    }
-    
-    .nav-hover-dropdown .dropdown-toggle-split::after {
-        vertical-align: 0.15em;
-        font-size: 0.75em;
-    }
-}
-
-/* Mobile: Standard offcanvas behavior with stacked dropdowns */
-@media (max-width: 991.98px) {
-    #bdNavbar .navbar-nav {
-        flex-direction: column !important;
-    }
-    
-    /* Fix mobile nav item layout - keep toggle next to link text */
-    .nav-hover-dropdown {
-        flex-wrap: wrap !important;
-        justify-content: flex-start !important;
-    }
-    
-    /* Parent link should not stretch - stay with its content width */
-    .nav-hover-dropdown > .nav-link:first-child {
-        flex: 0 0 auto !important;
-    }
-    
-    /* Toggle button stays next to link */
-    .nav-hover-dropdown > .dropdown-toggle-split {
-        flex: 0 0 auto;
-    }
-    
-    /* Rotate caret on open */
-    .nav-hover-dropdown > .dropdown-toggle-split::after {
-        transition: transform 0.25s ease;
-    }
-    
-    .nav-hover-dropdown > .dropdown-toggle-split.show::after {
-        transform: rotate(180deg);
-    }
-    
-    /* Stack dropdown below parent in mobile offcanvas - full width on new row */
-    .nav-hover-dropdown .dropdown-menu {
-        position: static !important;
-        float: none;
-        flex-basis: 100% !important;
-        width: 100%;
-        margin-top: 0;
-        border: none;
-        box-shadow: none;
-        background-color: var(--bs-tertiary-bg);
-        padding-left: 1rem;
-        /* Transition for smooth open/close */
-        max-height: 0;
-        overflow: hidden;
-        opacity: 0;
-        transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
-        padding-top: 0;
-        padding-bottom: 0;
-        display: block !important;
-    }
-    
-    /* Show dropdown on click with animation */
-    .nav-hover-dropdown .dropdown-menu.show {
-        max-height: 500px;
-        opacity: 1;
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
-    }
-}
-
-/* Active dropdown item styling */
-.dropdown-item[aria-current="page"] {
-    background-color: var(--bs-primary);
-    color: var(--bs-white);
-}
-
-.dropdown-item[aria-current="page"]:hover {
-    background-color: var(--bs-primary);
-    filter: brightness(0.9);
-}
-
-/* Dropdown menu styling */
-.nav-hover-dropdown .dropdown-menu {
-    border-radius: 0.375rem;
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-}
-
-.nav-hover-dropdown .dropdown-item {
-    padding: 0.5rem 1rem;
-}
-
-.nav-hover-dropdown .dropdown-item:hover {
-    background-color: var(--bs-tertiary-bg);
-}
-</style>
-
-<!-- Script to handle offcanvas navigation -->
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Get all navigation links in the offcanvas
-    const offcanvasLinks = document.querySelectorAll('#bdNavbar .nav-link[href]:not(.dropdown-toggle), #bdNavbar .dropdown-item[href]');
-    
-    offcanvasLinks.forEach(link => {
-        link.addEventListener('click', function(e) {
-            // Allow the navigation to happen
-            // Then close the offcanvas after a brief delay
-            setTimeout(() => {
-                const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('bdNavbar'));
-                if (offcanvas) {
-                    offcanvas.hide();
-                }
-            }, 100);
-        });
-    });
-    
-    // Desktop: Add keyboard accessibility for hover dropdowns
-    const hoverDropdowns = document.querySelectorAll('.nav-hover-dropdown');
-    hoverDropdowns.forEach(dropdown => {
-        const toggle = dropdown.querySelector('.dropdown-toggle');
-        const menu = dropdown.querySelector('.dropdown-menu');
-        
-        // Show on focus (keyboard navigation)
-        toggle?.addEventListener('focus', () => {
-            menu?.classList.add('show');
-        });
-        
-        // Hide when focus leaves the dropdown entirely
-        dropdown.addEventListener('focusout', (e) => {
-            if (!dropdown.contains(e.relatedTarget)) {
-                menu?.classList.remove('show');
-            }
-        });
-    });
-    
-    // Mobile: Custom dropdown handling to prevent glitches
-    // Only apply on mobile breakpoint
-    const isMobile = () => window.innerWidth < 992;
-    
-    hoverDropdowns.forEach(dropdown => {
-        const toggle = dropdown.querySelector('.dropdown-toggle-split');
-        const menu = dropdown.querySelector('.dropdown-menu');
-        
-        if (!toggle || !menu) return;
-        
-        // Prevent Bootstrap's default dropdown behavior on mobile
-        toggle.addEventListener('click', function(e) {
-            if (!isMobile()) return; // Let desktop use default behavior
-            
-            e.preventDefault();
-            e.stopPropagation();
-            
-            // Toggle this dropdown
-            const isOpen = menu.classList.contains('show');
-            
-            if (isOpen) {
-                // Close this dropdown
-                menu.classList.remove('show');
-                toggle.classList.remove('show');
-                toggle.setAttribute('aria-expanded', 'false');
-            } else {
-                // Open this dropdown (don't close others - allow multiple open)
-                menu.classList.add('show');
-                toggle.classList.add('show');
-                toggle.setAttribute('aria-expanded', 'true');
-            }
-        });
-    });
-    
-    // Close dropdowns when clicking outside on mobile
-    document.addEventListener('click', function(e) {
-        if (!isMobile()) return;
-        
-        // If click is outside all dropdowns, close them all
-        const clickedInsideDropdown = e.target.closest('.nav-hover-dropdown');
-        if (!clickedInsideDropdown) {
-            hoverDropdowns.forEach(dropdown => {
-                const toggle = dropdown.querySelector('.dropdown-toggle-split');
-                const menu = dropdown.querySelector('.dropdown-menu');
-                if (menu && toggle) {
-                    menu.classList.remove('show');
-                    toggle.classList.remove('show');
-                    toggle.setAttribute('aria-expanded', 'false');
-                }
-            });
-        }
-    });
-    
-    // Reset dropdowns when offcanvas closes
-    const offcanvasEl = document.getElementById('bdNavbar');
-    offcanvasEl?.addEventListener('hide.bs.offcanvas', function() {
-        hoverDropdowns.forEach(dropdown => {
-            const toggle = dropdown.querySelector('.dropdown-toggle-split');
-            const menu = dropdown.querySelector('.dropdown-menu');
-            if (menu && toggle) {
-                menu.classList.remove('show');
-                toggle.classList.remove('show');
-                toggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    });
-});
-</script>
+<!-- 
+  Navigation styles are now in _sass/core/_navbar.scss
+  Navigation scripts are now in assets/js/navigation.js
+  These are loaded automatically via the theme's asset pipeline
+-->