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

2 files changed, 5 insertions, 22 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);
   }