Updated design of page navigation box

resources/assets/js/components/page-display.js

@@ -208,8 +208,8 @@ class PageDisplay {
             let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
 
             // observe each heading
-            for (let i = 0; i !== headings.length; ++i) {
-                pageNavObserver.observe(headings[i]);
+            for (let heading of headings) {
+                pageNavObserver.observe(heading);
             }
         }
 
@@ -221,14 +221,9 @@ class PageDisplay {
         }
 
         function toggleAnchorHighlighting(elementId, shouldHighlight) {
-            let anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]');
-            for (let i = 0; i < anchorsToHighlight.length; i++) {
-                // Change below to use classList.toggle when IE support is dropped.
-                if (shouldHighlight) {
-                    anchorsToHighlight[i].classList.add('current-heading');
-                } else {
-                    anchorsToHighlight[i].classList.remove('current-heading');
-                }
+            const anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]');
+            for (let anchor of anchorsToHighlight) {
+                anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
             }
         }
     }

resources/assets/sass/_lists.scss

@@ -16,36 +16,60 @@
 }
 
 .sidebar-page-nav {
-  $nav-indent: $-s;
+  $nav-indent: $-m;
   list-style: none;
   margin: $-s 0 $-m 2px;
-  border-left: 2px dotted #BBB;
+  position: relative;
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.2);
+    width: 2px;
+    top: 5px;
+    bottom: 5px;
+    z-index: 0;
+  }
   li {
-    padding-left: $-s;
     margin-bottom: 4px;
     font-size: 0.95em;
+    position: relative;
   }
   .h1 {
-    margin-left: -2px;
+    padding-left: $nav-indent;
   }
   .h2 {
-    margin-left: -2px;
+    padding-left: $nav-indent;
   }
   .h3 {
-    margin-left: $nav-indent;
+    padding-left: $nav-indent * 2;
   }
   .h4 {
-    margin-left: $nav-indent*2;
+    padding-left: $nav-indent * 2.5;
   }
   .h5 {
-    margin-left: $nav-indent*3;
+    padding-left: $nav-indent*3;
   }
   .h6 {
-    margin-left: $nav-indent*4;
+    padding-left: $nav-indent*3.5;
   }
   .current-heading {
     font-weight: bold;
   }
+  li:not(.current-heading) .sidebar-page-nav-bullet {
+    background-color: #BBB !important;
+  }
+  .sidebar-page-nav-bullet {
+    width: 6px;
+    height: 6px;
+    position: absolute;
+    left: -2px;
+    top: 30%;
+    border-radius: 50%;
+    box-shadow: 0 0 0 6px #F2F2F2;
+    z-index: 1;
+  }
 }
 
 // Sidebar list

resources/views/pages/show.blade.php

@@ -64,6 +64,7 @@
                     @foreach($pageNav as $navItem)
                         <li class="page-nav-item h{{ $navItem['level'] }}">
                             <a href="{{ $navItem['link'] }}">{{ $navItem['text'] }}</a>
+                            <div class="primary-background sidebar-page-nav-bullet"></div>
                         </li>
                     @endforeach
                 </div>