From 4533f0abbe7d0fec03437d97931b57b2106b3f80 Mon Sep 17 00:00:00 2001
From: Pete Lumbis <plumbis@users.noreply.github.com>
Date: Sat, 3 Dec 2022 13:32:50 -0500
Subject: [PATCH] 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>
---
 themes/geekboot/assets/scss/_sidebar.scss          | 14 ++++++++------
 themes/geekboot/layouts/partials/docs-sidebar.html |  4 +++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/themes/geekboot/assets/scss/_sidebar.scss b/themes/geekboot/assets/scss/_sidebar.scss
index 76569ba6..e0b70c06 100644
--- a/themes/geekboot/assets/scss/_sidebar.scss
+++ b/themes/geekboot/assets/scss/_sidebar.scss
@@ -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;
         }
       }
diff --git a/themes/geekboot/layouts/partials/docs-sidebar.html b/themes/geekboot/layouts/partials/docs-sidebar.html
index b5c38646..cd46c33a 100644
--- a/themes/geekboot/layouts/partials/docs-sidebar.html
+++ b/themes/geekboot/layouts/partials/docs-sidebar.html
@@ -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>