fix: sidebar and navbar

_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 = ["[email protected]"]