fix: make sidebar bullet markers clickable

Author: SouparnaChatterjee

_includes/components/nav.html

@@ -0,0 +1,75 @@
+{%- comment -%}
+  Include as: {%- include components/nav.html pages=pages -%}
+  Depends on: include.pages.
+  Results in: HTML for the navigation panel.
+  Includes:
+    sorted_pages.html
+  Overwrites:
+    nav_pages, first_level_pages, second_level_pages, third_level_pages,
+    node, children_list, child, grand_children_list, grand_child.
+{%- endcomment -%}
+
+{%- assign nav_pages = include.pages
+    | where_exp: "item", "item.title != nil"
+    | where_exp: "item", "item.nav_exclude != true" -%}
+
+{%- include sorted_pages.html pages = nav_pages -%}
+
+{%- comment -%}
+  It might be more efficient to sort the pages at each level separately.
+{%- endcomment -%}
+
+{%- assign first_level_pages = sorted_pages
+    | where_exp: "item", "item.parent == nil" -%}
+{%- assign second_level_pages = sorted_pages
+    | where_exp: "item", "item.parent != nil"
+    | where_exp: "item", "item.grand_parent == nil" -%}
+{%- assign third_level_pages = sorted_pages
+    | where_exp: "item", "item.grand_parent != nil" -%}
+
+<ul class="nav-list">
+{%- for node in first_level_pages -%}
+  <li class="nav-list-item">
+    {%- if node.has_children -%}
+    <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ node.title }} category" aria-pressed="false">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
+    </button>
+    {%- endif -%}
+    <a href="{{ node.url | relative_url }}" class="nav-list-link"><span class="nav-bullet">&#9679;</span>{{ node.title }}</a>
+    {%- if node.has_children -%}
+      {%- assign children_list = second_level_pages
+            | where: "parent", node.title -%}
+      {%- if node.child_nav_order == 'desc' or node.child_nav_order == 'reversed' -%}
+        {%- assign children_list = children_list | reverse -%}
+      {%- endif -%}
+      <ul class="nav-list">
+      {%- for child in children_list -%}
+        <li class="nav-list-item">
+          {%- if child.has_children -%}
+          <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ child.title }} category" aria-pressed="false">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
+          </button>
+          {%- endif -%}
+          <a href="{{ child.url | relative_url }}" class="nav-list-link"><span class="nav-bullet">&#9679;</span>{{ child.title }}</a>
+          {%- if child.has_children -%}
+            {%- assign grand_children_list = third_level_pages
+                  | where: "parent", child.title
+                  | where: "grand_parent", node.title -%}
+            {%- if child.child_nav_order == 'desc' or child.child_nav_order == 'reversed' -%}
+              {%- assign grand_children_list = grand_children_list | reverse -%}
+            {%- endif -%}
+            <ul class="nav-list">
+            {%- for grand_child in grand_children_list -%}
+              <li class="nav-list-item">
+                <a href="{{ grand_child.url | relative_url }}" class="nav-list-link"><span class="nav-bullet">&#9679;</span>{{ grand_child.title }}</a>
+              </li>
+            {%- endfor -%}
+            </ul>
+          {%- endif -%}
+        </li>
+      {%- endfor -%}
+      </ul>
+    {%- endif -%}
+  </li>
+{%- endfor -%}
+</ul>

_includes/head_custom.html

@@ -3,4 +3,5 @@
 <script src="/assets/js/jquery-3.4.1.min.js"></script>
 <script src="/assets/js/module.js"></script>
 <script src="/assets/js/quiz.js"></script>
-<script src="/assets/js/global_scripts.js"></script>
+<script src="/assets/js/global_scripts.js"></script>
+<script defer src="/assets/js/nav-bullets-clickable.js"></script>

_sass/custom/custom.scss

@@ -195,7 +195,7 @@ $text-color: #111111;
 // CV flavored side nav
 //
 .nav-list {
-  list-style: circle url("/assets/images/nav-marker-inactive.svg") inside;
+  list-style: none;
 
   .nav-list-item {
     // scss-lint:disable SelectorDepth
@@ -204,7 +204,7 @@ $text-color: #111111;
     }
 
     &.active {
-      list-style: disc url("/assets/images/nav-marker-active.svg") inside;
+      list-style: none;
     }
   }
 
@@ -214,7 +214,15 @@ $text-color: #111111;
   }
 
   .nav-list-item.active {
-    list-style: disc url("/assets/images/nav-marker-active.svg") inside;
+    list-style: none;
+  }
+
+  .nav-bullet {
+    color: $body-text-color;
+    cursor: pointer;
+    font-size: 1rem;
+    margin-right: 0.3rem;
+    vertical-align: middle;
   }
 }
 
@@ -315,3 +323,12 @@ button,
   top: 0;
   z-index: 500;
 }
+
+// Fix: make sidebar bullet markers clickable
+.nav-list-item {
+  cursor: pointer;
+}
+// Fix: sidebar expander arrow should be cursor pointer
+.nav-list-expander {
+  cursor: pointer;
+}

assets/js/nav-bullets-clickable.js

@@ -0,0 +1,17 @@
+// Fix: make sidebar bullet markers clickable
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll(".nav-list-item").forEach(function (item) {
+    item.addEventListener("click", function (e) {
+      var link = item.querySelector(".nav-list-link");
+      var expander = item.querySelector(".nav-list-expander");
+      if (
+        link &&
+        e.target !== link &&
+        !link.contains(e.target) &&
+        !(expander && (e.target === expander || expander.contains(e.target)))
+      ) {
+        link.click();
+      }
+    });
+  });
+});