diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index c825d737378ebbd87ccd23d520f6c917c0ba4cde..e99fbb8a78fcd3db6bf13a2695adcaa6cd614015 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 4348615d6287d44bbeb16df79f8039b6255359f3..4e9e0846c27fa08683e3e021e99067d24c8fce08 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -1,82 +1,67 @@
-// stylelint-disable declaration-no-important
-
.bd-links {
- @include media-breakpoint-up(md) {
- @supports (position: sticky) {
- position: sticky;
- top: 5rem;
- height: subtract(100vh, 7rem);
- overflow-y: auto;
- }
- }
+ font-weight: 600;
- // Override collapse behaviors
@include media-breakpoint-up(md) {
+ position: sticky;
+ top: 5rem;
+ // Override collapse behaviors
+ // stylelint-disable-next-line declaration-no-important
display: block !important;
- }
-}
-
-:not(.active) > .bd-sidenav {
- display: none;
-}
-
-.bd-sidenav-group-link {
- padding: .25rem .625rem .25rem .5rem;
- font-weight: 600;
- color: rgba($black, .65);
- text-decoration: none;
- @include border-radius(.25rem);
-
- > * { pointer-events: none; }
-
- &:hover,
- &:focus {
- color: rgba($black, .85);
- background-color: rgba($bd-purple-bright, .1);
- }
-}
-
-.bd-sidenav-group {
- &.has-children .bd-sidenav-group-link::before {
- display: inline-block;
- margin-right: .25rem;
- line-height: 0; // Align in the middle
- content: escape-svg($sidebar-collapse-icon);
+ height: subtract(100vh, 7rem);
+ // Prevent focus styles to be cut off:
+ padding-left: .25rem;
+ margin-left: -.25rem;
+ overflow-y: auto;
}
- &.active {
- .bd-sidenav-group-link::before {
- transform: rotate(90deg);
- }
-
- > .bd-sidenav-group-link {
- color: rgba($black, .85);
- }
- }
-}
-
-// All levels of nav
-.bd-sidebar .nav {
- padding-left: 1.25rem;
-
- > li > a {
- display: inline-block;
- padding: .25rem .5rem;
- @include font-size(.875rem);
+ a {
+ display: inline-flex;
+ align-items: center;
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
color: rgba($black, .65);
- text-decoration: none;
+ text-decoration: if($link-decoration == none, null, none);
@include border-radius(.25rem);
&:hover,
&:focus {
color: rgba($black, .85);
+ text-decoration: if($link-hover-decoration == underline, none, null);
background-color: rgba($bd-purple-bright, .1);
}
+
+ // Indent if there's no submenu
+ &:only-child {
+ margin-left: 1.25rem;
+ }
+
+ // 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%;
+ }
+
+ &:not(.collapsed) {
+ color: rgba($black, .85);
+
+ &::before {
+ transform: rotate(90deg);
+ }
+ }
+ }
+
+ // Adjust font size and font weights in submenu
+ + ul {
+ @include font-size(.875rem);
+ font-weight: 400;
+ }
}
- > .active > a,
- > .active:hover > a,
- > .active:focus > a {
+ .active {
font-weight: 600;
color: rgba($black, .85);
}
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index b1efb6b132bdd67f1116782776cf43d506657d32..383ff0f0c1d0958a7cd50686990ab79d885c18b8 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -11,7 +11,7 @@
<div class="container-xl my-4">
<div class="row flex-xl-nowrap">
- <div class="col-md-3 bd-sidebar">
+ <div class="col-md-3">
{{ partial "docs-sidebar" . }}
</div>
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 772cbd7f739d0ac5dd2873e29f9fa338d28c54d2..9af562340ddacf4642e9cb4ffa5bc7c5e3093f88 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -2,7 +2,7 @@
{{- $url := split .Permalink "/" -}}
{{- $page_slug := index $url (sub (len $url) 2) -}}
- <ul class="list-unstyled">
+ <ul class="list-unstyled mb-0">
{{- range $group := .Site.Data.sidebar -}}
{{- $link := $group.title -}}
{{- $link_slug := $link | urlize -}}
@@ -15,17 +15,17 @@
{{- $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 }}">
- <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}"{{ if $active_group }} aria-current="true"{{ end }}>
+ <li class="my-1{{ if $active_group }} active{{ end }}">
+ <a class="{{ if not $active_group }} collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $active_group }}"{{ if $active_group }} aria-current="true"{{ end }}>
{{ $group.title }}
</a>
{{- if $group.pages }}
- <ul class="nav bd-sidenav flex-column mb-2">
+ <ul class="list-unstyled mb-2 collapse{{ if $active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize }}
- <li{{ if and $active_group (eq $page_slug $doc_slug) }} class="active bd-sidenav-active"{{ end }}>
- <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ $doc_slug }}/"{{ if and $active_group (eq $page_slug $doc_slug) }} aria-current="page"{{ end }}>
+ <li>
+ <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ $doc_slug }}/"{{ if and $active_group (eq $page_slug $doc_slug) }} class="active" aria-current="page"{{ end }}>
{{- $doc.title -}}
</a>
</li>
@@ -36,8 +36,8 @@
{{- end }}
<li class="my-3 mx-4 border-top"></li>
- <li class="bd-sidenav-group pl-3">
- <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/migration/">
+ <li{{ if eq $page_slug "migration" }} class="active"{{ end }}>
+ <a href="/docs/{{ $.Site.Params.docs_version }}/migration/">
Migration
</a>
</li>