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

3 files changed, 6 insertions, 23 deletions

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index c825d73737..e99fbb8a78 100644
--- 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 0ce1bca019..4eb316cbb1 100644
--- 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 123a92456b..d3c7161e49 100644
--- 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 }}