make it work for nav level 0

Author: gabalafou

src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss

@@ -140,6 +140,10 @@
   .list-caption {
     list-style: none;
     padding-left: 0px;
+
+    .nav {
+      display: block;
+    }
   }
   li {
     position: relative;
@@ -150,21 +154,25 @@
         padding-right: 30px;
       }
 
-      details {
+      > details {
         // Get rid of the default toggle icon
         > summary {
           display: flex;
           justify-content: space-between;
+          align-items: baseline;
           list-style: none;
           &::-webkit-details-marker {
             display: none;
           }
         }
 
-        // The section is open, rotate the toggle icon (chevron) so it points down instead of to the right
+        // The section is open/expanded, rotate the toggle icon (chevron) so it
+        // points down instead of to the right
         &[open] {
-          .fa-chevron-down {
-            transform: rotate(180deg);
+          > summary {
+            .fa-chevron-down {
+              transform: rotate(180deg);
+            }
           }
         }
       }
@@ -173,9 +181,6 @@
   }
   // Navigation item chevrons
   span.toctree-toggle {
-    height: 30px;
-    width: 30px;
-
     cursor: pointer;
 
     display: inline-flex;
@@ -186,26 +191,19 @@
       background: var(--pst-color-surface);
     }
 
-    i {
+    svg {
       display: inline-block;
       font-size: 0.75rem;
       text-align: center;
       &:hover {
         color: var(--pst-color-primary);
       }
     }
-  }
-  .label-parts {
-    width: 100%;
-    height: 100%;
-    &:hover {
-      background: none;
-    }
-    i {
-      width: 30px;
-      position: absolute;
-      top: 0.3em; // aligning chevron with text
-      right: 0em; // aligning chevron to the right
+
+    .toctree-l10 & {
+      svg {
+        font-size: inherit;
+      }
     }
   }
 }

src/pydata_sphinx_theme/toctree.py

@@ -364,8 +364,7 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
                 parentli.find("details")["open"] = None
 
         # Nothing more to do, unless this has "children"
-        subtree = element.find("ul")
-        if not subtree:
+        if not element.find("ul"):
             continue
 
         # Add a class to indicate that this has children.
@@ -374,23 +373,26 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
         if soup.new_tag is None:
             continue
 
-        # Modify the tree so that it looks like
+        # Modify the tree so that it looks like:
         #
         # li.has-children
         # > details
         #   > summary
         #     > a.reference ~ span.toctree-toggle
         #   > ul
 
-        # Create <details> and move everything under this TOC <li> entry inside it
+        # Create <details> and move everything at this level into it
         details = soup.new_tag("details")
         details.extend(element.contents)
         element.append(details)
 
-        # Create <summary> and move the TOC <a> entry into it
+        # Create <summary> and move the level's heading into it
         summary = soup.new_tag("summary")
-        summary.append(details.a)
         details.insert(0, summary)
+        summary.append(
+            # heading
+            element.select_one("details > p.caption, details > a.reference")
+        )
 
         # Create chevron icon and append to <summary>
         span = soup.new_tag(
@@ -401,9 +403,6 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
             },
         )
         span.append(soup.new_tag("i", attrs={"class": "fa-solid fa-chevron-down"}))
-        if "toctree-l0" in classes:
-            # making label cover the whole caption text with css
-            span["class"] = "label-parts"
         summary.append(span)
 
         # If this has a "current" class, be expanded by default