Add collapsed class by default and update styles for X (#222)

Signed-off-by: Pete Lumbis <pete@upbound.io>

Signed-off-by: Pete Lumbis <pete@upbound.io>
This commit is contained in:
Pete Lumbis 2022-12-03 13:32:50 -05:00 committed by GitHub
parent fccc873ee3
commit 4533f0abbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 7 deletions

View File

@ -51,22 +51,24 @@
.sidebar-checkbox{
display: none !important;
}
&:not(:checked){
.sidebar-label {
&.collapsed{
& ~ label svg.sidebar-icon.plus {
svg.sidebar-icon.plus {
display: block !important;
}
& ~ label svg.sidebar-icon.x {
svg.sidebar-icon.x {
display: none !important;
}
}
&:checked{
&:not(.collapsed){
& ~ label svg.sidebar-icon.plus {
svg.sidebar-icon.plus {
display: none !important;
}
& ~ label svg.sidebar-icon.x {
svg.sidebar-icon.x {
display: block !important;
}
}

View File

@ -44,7 +44,9 @@
</div>
<div class="d-flex flex-shrink-1 sidebar-control-container align-self-center">
<input type="checkbox" class="d-flex sidebar-checkbox" {{if $expand}}checked{{ end }} aria-label="Close or Expand {{.thisPage.Title}} Section" />
<label for="collapse-{{$id}}" class="sidebar-label" data-bs-toggle="collapse" data-bs-target="#collapse-{{$id}}" aria-expanded="false" aria-label="Close or Expand {{.thisPage.Title}} Section">
<label for="collapse-{{$id}}" class="sidebar-label {{if not $expand}} collapsed {{ end }}" data-bs-toggle="collapse"
data-bs-target="#collapse-{{$id}}" aria-expanded="false"
aria-label="Close or Expand {{.thisPage.Title}} Section">
<svg class="flex bi sidebar-icon plus" ><use xlink:href="#plus"></use></svg>
<svg class="flex bi sidebar-icon x " ><use xlink:href="#x"></use></svg>
</label>