Improve documentation website UX (#1751)

As we added more tutorials and new services to ACK and our documentation
website, it got harder to navigate throught the docs menu. This update
improves the UX by tweaking the `docs-menu.html` and
`reference-menu-item.html` files to make it easier to use the pages
sections.

This patch bring mainly two changes:
- On the `Documentation` page, all the sections (except the active one)
  are collapsed by default. No more getting lost in a sea of sections!
- On the `API References` page, the expand icon now correctly shows the
  status of the section/subsection (expanded/unexpanded), when selecting
  a new CRD.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Author: a-hilaly

docs/layouts/partials/sidebar/docs-menu.html

@@ -5,11 +5,11 @@
   {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
   {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
     <li class="mb-1">
-      <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ .Identifier }}" aria-expanded="true">
+      <button class="btn btn-toggle align-items-center rounded{{ if not $active }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#section-{{ .Identifier }}" aria-expanded="{{ if not $active }}false{{ else }}true{{ end }}">
         {{ .Name }}
       </button>
       {{ if .HasChildren -}}
-      <div class="collapse show" id="section-{{ .Identifier }}">
+      <div class="collapse{{ if $active }} show{{ else }} collapsed{{ end }}" id="section-{{ .Identifier }}">
         <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
         {{ range .Children -}}
           {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}

docs/layouts/partials/sidebar/reference-menu-item.html

@@ -1,10 +1,10 @@
 {{ $root := . }}
 <li class="mb-1">
   {{ $serviceActive := eq $root.currentService $root.service.name }}
-  <button class="btn btn-toggle align-items-center rounded {{ if not $serviceActive }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#section-{{ .service.name }}" aria-expanded="{{ if not $root.serviceActive }} false{{ else }}true{{ end }}">
+  <button class="btn btn-toggle align-items-center rounded {{ if not $serviceActive }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#section-{{ .service.name }}" aria-expanded="{{ if not $serviceActive }} false{{ else }}true{{ end }}">
     {{ $root.service.service_metadata.service.short_name }}
   </button>
-  <div class="collapse position-relative{{ if $serviceActive }} show{{ end }}" id="section-{{ $root.service.name }}">
+  <div class="collapse position-relative{{ if not $serviceActive }} collapsed{{ else }} show{{ end }}" id="section-{{ $root.service.name }}" aria-expanded="{{ if not $root.serviceActive }} false{{ else }} true{{ end }}">
     {{ range $api_version := sort $root.service.service_metadata.api_versions }}
       {{ $versionActive := and $serviceActive (eq $root.currentVersion ($api_version.api_version | lower)) }}
       <button class="btn btn-toggle align-items-center rounded ms-2 small{{ if not $versionActive }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#section-{{ $root.service.name }}-{{ $api_version.api_version }}" aria-expanded="{{ if not $versionActive }} false{{ else }}true{{ end }}">