fix: sidebar and navbar

Author: reinhart1010

_includes/ham/navbar.html

@@ -5,7 +5,7 @@
         <i class="bi bi-list-nested" aria-hidden="true"></i>
       </button>
     </div>
-    <a class="navbar-brand" href="#">
+    <a class="navbar-brand" href="/">
       {% if site.ham.site_icon != null %}
         <img src="{{ site.ham.site_icon }}" alt="{{ site.title }}" width="24" height="24" class="d-inline-block align-text-top">
       {% endif %}{{ site.title }}

_includes/ham/sidebar.html

@@ -2,12 +2,10 @@
   <div class="offcanvas-header d-md-none border-bottom border-secondary border-opacity-25">
     <a href="/" class="sidebar-brand">
       {% if site.ham.site_icon != null %}
-        <img src="{{ site.ham.site_icon }}" alt="{{ site.title }}">
+        <img src="{{ site.ham.site_icon }}" alt="{{ site.title }}" width="24" height="24">
       {% endif %}{{ site.title }}
     </a>
-    <button type="button" class="btn-close d-md-none" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#_ham_sidebar">
-      <i class="bi bi-x-lg" aria-description="Close sidebar"></i>
-    </button>
+    <button type="button" class="btn-close d-md-none" aria-label="Close" data-bs-dismiss="offcanvas" data-bs-target="#_ham_sidebar"></button>
   </div>
   <div class="offcanvas-body">
     <div class="mb-3">

_layouts/default.html

@@ -67,7 +67,7 @@
     document.getElementById('_ham_search_input').addEventListener('change', updateSearchResultsVisibility);
     document.getElementById('_ham_search_input').addEventListener('input', updateSearchResultsVisibility);
   </script>
-  <!-- Halfmoon JS -->
+  <!-- Bootstrap JS -->
   <script src="{{ site.url }}/assets/halfmoon.min.js"></script>
   <!-- Bootstrap JS for color modes -->
   <script src="{{ site.url }}/assets/bootstrap-color-modes.js"></script>

_layouts/page.html

@@ -2,10 +2,10 @@
 layout: default
 ---
 <article class="row px-1 py-3">
-  <div class="col-xl-8 collapse-group article-wrapper" id="_ham_content">
+  <div class="col-xl-8 collapse-group article-wrapper mb-3" id="_ham_content">
     {{ content }}
   </div>
-  <div class="col-xl-4">
+  <div class="col-xl-4 mb-3">
     {% if page.related_topics != null %}
       <div class="mb-3">
         <h5 id="related-topics" class="sidebar-title">Related Topics</h5>

assets/entry-parser.js

@@ -61,12 +61,14 @@ function parseRawEntry(originalContent, onThisPageEntry, siteTitle, siteTagline)
       var newA = document.createElement('a');
       newA.href = '#' + node.id;
       newA.className = 'nav-link text-truncate';
-      newA.setAttribute('onclick', 'expandAccordion(\'' + currentAccordionId + '\')');
+      newA.setAttribute('data-bs-dismiss', 'offcanvas');
+      newA.setAttribute('data-bs-target', '#_ham_sidebar');
+      newA.setAttribute('onclick', 'expandAccordion(\'' + currentAccordionId + '\', \'' + node.id + '\')');
       for (j = 2; j < currentHeadingLevel; j++){
         var newSpan = document.createElement('span');
         if (j == currentHeadingLevel - 1) {
           newSpan.className = 'me-1 d-inline-block text-body-tertiary';
-          newSpan.textContent = '↳';
+          newSpan.innerHTML = '<i class="bi bi-arrow-return-right"></i>';
         } else {
           newSpan.className = 'ms-3 d-inline-block';
         }
@@ -193,9 +195,14 @@ function autoexpandAccordion(){
   }
 }
 
-async function expandAccordion(id){
-  var el = new bootstrap.Collapse(document.getElementById(id + "-content"), {toggle: false});
+async function expandAccordion(collapsibleId, contentId){
+  var el = new bootstrap.Collapse(document.getElementById(collapsibleId + "-content"), {toggle: false});
   await el.show();
+  if (contentId) {
+    location.hash = "";
+    location.hash = "#" + contentId;
+    scrollBy(0, -66);
+  }
 }
 
 window.addEventListener("load", autoexpandAccordion);

jekyll-ham.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-ham"
-  spec.version       = "1.0.1"
+  spec.version       = "1.0.2"
   spec.authors       = ["Reinhart Previano Koentjoro"]
   spec.email         = ["reinhart@reinhart1010.id"]