docs(sidenav): get rid of custom JS for active state

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index c825d737378ebbd87ccd23d520f6c917c0ba4cde..e99fbb8a78fcd3db6bf13a2695adcaa6cd614015 100644 (file)
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -19,19 +19,6 @@
     return [].slice.call(list)
   }
 
-  makeArray(document.querySelectorAll('.js-sidenav-group'))
-    .forEach(function (sidenavGroup) {
-      var groupHasLinks = Boolean(sidenavGroup.querySelector('li'))
-      var groupLink = sidenavGroup.querySelector('a')
-
-      if (groupHasLinks) {
-        groupLink.addEventListener('click', function (e) {
-          e.preventDefault()
-          e.target.parentNode.classList.toggle('active')
-        }, true)
-      }
-    })
-
   // Tooltip and popover demos
   makeArray(document.querySelectorAll('.tooltip-demo'))
     .forEach(function (tooltip) {

diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 0ce1bca019e10a5ff39cd328df42d80c395f00bf..4eb316cbb173735d48422531c251ea130e0e5610 100644 (file)
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -40,13 +40,11 @@
     content: escape-svg($sidebar-collapse-icon);
   }
 
-  &.active {
-    .bd-sidenav-group-link::before {
-      transform: rotate(90deg);
-    }
+  [aria-expanded="true"] {
+    color: rgba($black, .85);
 
-    > .bd-sidenav-group-link {
-      color: rgba($black, .85);
+    &::before {
+      transform: rotate(90deg);
     }
   }
 }
@@ -71,9 +69,7 @@
     }
   }
 
-  > .active > a,
-  > .active:hover > a,
-  > .active:focus > a {
+  [aria-current="page"] {
     font-weight: 600;
     color: rgba($black, .85);
   }

diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 123a92456b56df69e9d39cd4d9b0b183c10fcf34..d3c7161e499c25279193fb679bd5220753f63753 100644 (file)
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -15,7 +15,7 @@
     {{- $group_slug := $group.title | urlize -}}
     {{- $active_group := eq $.Page.Params.group $group_slug }}
 
-    <li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }} js-sidenav-group{{ if $group.pages }} has-children{{ end }}">
+    <li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }}{{ if $group.pages }} has-children{{ end }}">
       <a class="d-inline-flex align-items-center bd-sidenav-group-link" data-toggle="collapse" href="#{{ $group_slug }}-collapse"
          role="button" aria-expanded="{{ $active_group }}"{{ if $active_group }} aria-current="true"{{ end }}>
         {{ $group.title }}