jekyll-theme-zer0 0.16.0 → 0.17.0

data/_includes/navigation/navbar.html

@@ -3,6 +3,7 @@
     path: /includes/navbar.html
     includes:
     purpose: Offcanvas main navigation following Bootstrap 5 best practices
+             with hover-activated dropdowns for desktop
  -->
 
 <!-- Navigation Links - Offcanvas -->
@@ -18,10 +19,10 @@
     <div class="offcanvas-body">
         <ul class="navbar-nav justify-content-lg-center text-start flex-grow-1">
             {%- for link in site.data.navigation.main -%}
-                {%- assign has_children = link.sublinks and link.sublinks.size > 0 -%}
+                {%- assign has_children = link.children and link.children.size > 0 -%}
 
                 {%- if has_children -%}
-                    <li class="nav-item dropdown d-flex align-items-center">
+                    <li class="nav-item dropdown d-flex align-items-center nav-hover-dropdown">
                         <!-- Parent link navigates directly -->
                         <a
                             class="nav-link"
@@ -34,28 +35,32 @@
                             {{ link.title }}
                         </a>
 
-                        <!-- Split toggle opens the dropdown -->
+                        <!-- Split toggle opens the dropdown (click on mobile, hover on desktop) -->
                         <a
-                            class="nav-link dropdown-toggle dropdown-toggle-split ms-2"
+                            class="nav-link dropdown-toggle dropdown-toggle-split ms-1 px-1"
                             href="#"
                             id="dropdown-{{ link.title | slugify }}"
                             role="button"
                             data-bs-toggle="dropdown"
+                            data-bs-auto-close="outside"
                             aria-expanded="false"
                             aria-label="Toggle {{ link.title }} menu"
                         >
                             <span class="visually-hidden">Toggle dropdown</span>
                         </a>
 
-                        <ul class="dropdown-menu dropdown-menu-start w-100" aria-labelledby="dropdown-{{ link.title | slugify }}">
-                            {%- for sublink in link.sublinks -%}
+                        <ul class="dropdown-menu dropdown-menu-start" aria-labelledby="dropdown-{{ link.title | slugify }}">
+                            {%- for child in link.children -%}
                                 <li>
                                     <a
                                         class="dropdown-item"
-                                        href="{{ sublink.url | relative_url }}"
-                                        {%- if sublink.url == page.url -%} aria-current="page"{%- endif -%}
+                                        href="{{ child.url | relative_url }}"
+                                        {%- if child.url == page.url -%} aria-current="page"{%- endif -%}
                                     >
-                                        {{ sublink.title }}
+                                        {%- if child.icon -%}
+                                            <i class="{{site.default_icon}} {{ child.icon }} me-2"></i>
+                                        {%- endif -%}
+                                        {{ child.title }}
                                     </a>
                                 </li>
                             {%- endfor -%}
@@ -80,6 +85,168 @@
     </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() {
@@ -98,5 +265,91 @@ document.addEventListener('DOMContentLoaded', function() {
             }, 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>

data/_includes/navigation/sidebar-left.html

@@ -4,27 +4,26 @@
   ===================================================================
   
   File: sidebar-left.html 
-  Path: _includes/sidebar-left.html
-  Purpose: Left sidebar navigation with multiple content modes including
-           dynamic page listing, category browsing, and manual navigation
+  Path: _includes/navigation/sidebar-left.html
+  Purpose: Left sidebar navigation with three standardized content modes
   
   Template Logic:
   - Responsive offcanvas sidebar for mobile devices
   - Three navigation modes based on page.sidebar.nav:
-    * "dynamic": Auto-generated folder structure from pages
-    * "searchCats": Category-based navigation from site categories
-    * Manual: Predefined navigation from _data files
+    * "auto": Auto-generated folder structure from collection documents
+    * "tree": YAML-defined hierarchical navigation from _data/navigation/
+    * "categories": Category-based navigation from site categories
   
   Dependencies:
-  - sidebar-folders.html: Dynamic folder structure generation
-  - sidebar-categories.html: Category-based navigation
-  - nav_list.html: Manual navigation list rendering
+  - sidebar-folders.html: Dynamic folder structure generation (auto mode)
+  - sidebar-categories.html: Category-based navigation (categories mode)
+  - nav-tree.html: YAML-based hierarchical tree (tree mode)
   - Bootstrap 5 offcanvas component
   
   Navigation Modes:
-  1. Dynamic: Scans site.pages for index.md files to build folder structure
-  2. Categories: Groups content by Jekyll categories
-  3. Manual: Uses predefined navigation from _data/navigation.yml
+  1. auto: Scans collection documents to build folder structure
+  2. tree: Uses predefined YAML navigation from _data/navigation/*.yml
+  3. categories: Groups content by Jekyll categories
   ===================================================================
 -->
 
@@ -50,32 +49,32 @@
   <div class="offcanvas-body overflow-auto">
 
     <!-- ========================== -->
-    <!-- DYNAMIC PAGE LISTING      -->
+    <!-- AUTO MODE: Collection Docs -->
     <!-- ========================== -->
-    <!-- Auto-generates folder structure from pages containing index.md -->
-    {% if page.sidebar.nav == "dynamic" %}
-    <div class="list-group" id="sidebar-content">
+    <!-- Auto-generates folder structure from collection documents -->
+    {% if page.sidebar.nav == "auto" %}
+    <div class="list-group nav-tree" id="sidebar-content" data-nav-tree>
       {% assign folders = site.pages | where_exp: "item", "item.path contains 'index.md'" | sort: 'path' %}
       {% include navigation/sidebar-folders.html folders=folders %}
     </div>
 
     <!-- ========================== -->
-    <!-- CATEGORY-BASED NAVIGATION -->
+    <!-- CATEGORIES MODE           -->
     <!-- ========================== -->
     <!-- Creates navigation from Jekyll post/page categories -->
-    {% elsif page.sidebar.nav == "searchCats" %}
-    <div class="list-group" id="sidebar-content">
+    {% elsif page.sidebar.nav == "categories" %}
+    <div class="list-group nav-tree" id="sidebar-content" data-nav-tree>
       {% assign categories = site.categories | sort %}
       {% include navigation/sidebar-categories.html categories=categories %}
     </div>
     
     <!-- ========================== -->
-    <!-- MANUAL NAVIGATION LIST    -->
+    <!-- TREE MODE: YAML Navigation -->
     <!-- ========================== -->
-    <!-- Uses predefined navigation structure from _data files -->
+    <!-- Uses predefined YAML navigation structure from _data files -->
     {% elsif page.sidebar.nav %}
-    <nav class="w-100">
-      {% include navigation/nav_list.html nav=page.sidebar.nav %}
+    <nav class="w-100 nav-tree" data-nav-tree>
+      {% include navigation/nav-tree.html nav=page.sidebar.nav %}
     </nav>
     {% endif %}
     

data/_layouts/default.html

@@ -78,7 +78,7 @@ layout: root
         <!-- MAIN CONTENT BODY              -->
         <!-- =============================== -->
         <!-- Where the actual page content is rendered -->
-        <div id="main-content" class="bd-content ps-lg-2">
+        <div class="bd-content ps-lg-2">
             {{ content }}
         </div>
     </main>

data/_layouts/landing.html

@@ -60,7 +60,7 @@ layout: root
                     <a href="#features" class="btn btn-outline-light btn-lg">
                         <i class="bi bi-list-check me-2"></i>Features
                     </a>
-                    <a href="{{ site.resources.github_repo }}" class="btn btn-outline-light btn-lg">
+                        <a href="{{ site.resources.github_repo | default: '' | join: '' }}" class="btn btn-outline-light btn-lg">
                         <i class="bi bi-github me-2"></i>GitHub
                     </a>
                 </div>

data/_layouts/notebook.html

@@ -95,7 +95,7 @@ layout: default
     {% if page.tags and page.tags.size > 0 %}
       <div class="notebook-tags mb-3">
         {% for tag in page.tags %}
-          <a href="{{ site.baseurl }}/tags/{{ tag | slugify }}/" class="badge bg-secondary text-decoration-none me-1">
+          <a href="{{ '/tags/' | relative_url }}#{{ tag | slugify }}" class="badge bg-secondary text-decoration-none me-1">
             {{ tag }}
           </a>
         {% endfor %}
@@ -107,7 +107,7 @@ layout: default
       <div class="notebook-categories mb-3">
         <i class="bi bi-folder me-1"></i>
         {% for category in page.categories %}
-          <a href="{{ site.baseurl }}/categories/{{ category | slugify }}/" class="text-decoration-none">
+          <a href="{{ '/categories/' | relative_url }}#{{ category | slugify }}" class="text-decoration-none">
             {{ category }}
           </a>
           {% unless forloop.last %}<span class="mx-1">/</span>{% endunless %}
@@ -148,7 +148,7 @@ layout: default
              class="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
             <i class="bi bi-linkedin"></i> LinkedIn
           </a>
-          <a href="mailto:?subject={{ page.title | uri_escape }}&body={{ site.url | append: page.url | uri_escape }}" 
+          <a href="mailto:{{ site.email | escape }}?subject={{ page.title | uri_escape }}&body={{ site.url | append: page.url | uri_escape }}" 
              class="btn btn-outline-primary btn-sm">
             <i class="bi bi-envelope"></i> Email
           </a>
@@ -158,7 +158,7 @@ layout: default
     
     <!-- Download Original Notebook -->
     <div class="download-notebook mb-4">
-      <a href="{{ site.baseurl }}/pages/_notebooks/{{ page.slug }}.ipynb" 
+      <a href="https://raw.githubusercontent.com/{{ site.repository }}/{{ site.branch | default: 'main' }}/pages/_notebooks/{{ page.slug }}.ipynb" 
          class="btn btn-outline-secondary btn-sm" download>
         <i class="bi bi-download"></i> Download Original Notebook
       </a>

data/_layouts/root.html

@@ -65,8 +65,8 @@
         <!-- ======================== -->
         <!-- MAIN CONTENT AREA        -->
         <!-- ======================== -->
-        <!-- This is where child layouts inject their specific content -->
-        <div>
+        <!-- Skip-link target: keep a single, consistent #main-content anchor site-wide -->
+        <div id="main-content">
             {{ content }}
         </div>
 

data/_sass/core/_nav-tree.scss

@@ -0,0 +1,145 @@
+// ===================================================================
+// NAV TREE - Sidebar Navigation Tree Styles
+// ===================================================================
+//
+// File: _nav-tree.scss
+// Path: _sass/core/_nav-tree.scss
+// Purpose: Styles for the hierarchical navigation tree component
+//
+// Features:
+// - Collapsible tree nodes with smooth transitions
+// - Active state highlighting
+// - Hover effects
+// - Chevron rotation on expand/collapse
+// - Nested indentation
+//
+// ===================================================================
+
+// Navigation Tree Container
+.nav-tree {
+  font-size: 0.875rem;
+}
+
+.nav-tree-root {
+  margin: 0;
+  padding: 0;
+}
+
+// Navigation Tree Items
+.nav-tree-item {
+  margin-bottom: 0.125rem;
+  
+  // Nested items get additional indentation via ps-3 class
+}
+
+// Navigation Tree Links
+.nav-tree-link {
+  color: var(--bs-body-color);
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  
+  &:hover {
+    color: var(--bs-primary);
+    background-color: var(--bs-tertiary-bg);
+  }
+  
+  &.active {
+    color: var(--bs-primary);
+    background-color: var(--bs-primary-bg-subtle);
+    font-weight: 500;
+  }
+}
+
+// Navigation Tree Text (non-link items)
+.nav-tree-text {
+  color: var(--bs-secondary-color);
+}
+
+// Navigation Tree Toggle Buttons
+.nav-tree-toggle {
+  color: var(--bs-body-color);
+  text-decoration: none;
+  border: none;
+  background: transparent;
+  transition: color 0.15s ease-in-out;
+  
+  &:hover {
+    color: var(--bs-primary);
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+  }
+  
+  // Chevron rotation
+  .bi-chevron-down,
+  .nav-tree-chevron {
+    transition: transform 0.2s ease-in-out;
+  }
+  
+  &.collapsed {
+    .bi-chevron-down,
+    .nav-tree-chevron {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+// Children container
+.nav-tree-children {
+  margin-top: 0.25rem;
+  border-left: 1px solid var(--bs-border-color);
+  margin-left: 0.5rem;
+  padding-left: 0.75rem;
+}
+
+// Collapse animation
+.nav-tree .collapse {
+  transition: height 0.2s ease-in-out;
+}
+
+// Depth-based styling
+.nav-tree-item[data-depth="0"] > .nav-tree-link,
+.nav-tree-item[data-depth="0"] > div > .nav-tree-link,
+.nav-tree-item[data-depth="0"] > .nav-tree-toggle {
+  font-weight: 500;
+}
+
+.nav-tree-item[data-depth="1"] > .nav-tree-link,
+.nav-tree-item[data-depth="1"] > div > .nav-tree-link {
+  font-weight: normal;
+}
+
+.nav-tree-item[data-depth="2"] > .nav-tree-link,
+.nav-tree-item[data-depth="2"] > div > .nav-tree-link {
+  font-size: 0.8125rem;
+  color: var(--bs-secondary-color);
+  
+  &.active {
+    color: var(--bs-primary);
+  }
+}
+
+// Keyboard navigation focus state
+.keyboard-nav .nav-tree-link:focus,
+.keyboard-nav .nav-tree-toggle:focus {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+// Dark mode adjustments
+[data-bs-theme="dark"] {
+  .nav-tree-link {
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+    
+    &.active {
+      background-color: rgba(var(--bs-primary-rgb), 0.15);
+    }
+  }
+  
+  .nav-tree-children {
+    border-left-color: var(--bs-border-color);
+  }
+}

data/_sass/custom.scss

@@ -5,6 +5,9 @@
 // Import notebook-specific styles
 @import "notebooks";
 
+// Import navigation tree styles
+@import "core/nav-tree";
+
 html, body {
     max-width: 100%;
     // overflow-x: hidden;