Docs: change sidebar collapse controls to actual button elements (#31098)

apart from the visual styling, there's probably no good reason why these shouldn't be `<button>` elements, semantically

the buttons still look a shade too button-like, despite using `.btn-light`. the last remnant of button styling can probably be suppressed further, *or* this makes the case for expanding the core button styles to have one that looks completely non-button and non-link like (for cases where an additional style/hint was given already, or it's clear from context that something's an actionable button or link)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

1 files changed, 29 insertions, 16 deletions

diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 0575a465e5..9a933831fa 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -32,6 +32,7 @@
   a {
     padding: .1875rem .5rem;
     margin-top: .125rem;
+    margin-left: 1.25rem;
     color: rgba($black, .65);
     text-decoration: if($link-decoration == none, null, none);
 
@@ -41,28 +42,40 @@
       text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: rgba($bd-purple-bright, .1);
     }
+  }
+
+  .btn {
+    // Custom styles (as we don't have a completely neutral button style)
+    padding: .25rem .5rem;
+    font-weight: 600;
+    color: rgba($black, .65);
+    background-color: none;
+    border: 0;
+
+    &:hover,
+    &:focus {
+      color: rgba($black, .85);
+      background-color: rgba($bd-purple-bright, .1);
+    }
 
-    // Indent if there's no submenu
-    &:only-child {
-      margin-left: 1.25rem;
+    &:focus {
+      box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7);
     }
 
     // Add chevron if there's a submenu
-    &:not(:only-child) {
-      &::before {
-        width: 1.25em;
-        line-height: 0; // Align in the middle
-        content: escape-svg($sidebar-collapse-icon);
-        @include transition(transform .35s ease);
-        transform-origin: .5em 50%;
-      }
+    &::before {
+      width: 1.25em;
+      line-height: 0; // Align in the middle
+      content: escape-svg($sidebar-collapse-icon);
+      @include transition(transform .35s ease);
+      transform-origin: .5em 50%;
+    }
 
-      &:not(.collapsed) {
-        color: rgba($black, .85);
+    &[aria-expanded="true"] {
+      color: rgba($black, .85);
 
-        &::before {
-          transform: rotate(90deg);
-        }
+      &::before {
+        transform: rotate(90deg);
       }
     }
   }