Sidebar: Toc styling border

Author: nginx-jack

assets/css/v2/style.css

@@ -453,11 +453,22 @@ nav {
 .sidebar-layout {
   display: flex;
   flex-direction: column;
+  position: relative; /* required for absolute-positioned pseudo element */
   z-index: 2;
-  border-right: 1px solid var(--color-divider);
   min-height: 100vh;
 }
 
+/* this is the complete, corrected CSS you can directly copy/paste clearly: */
+.sidebar-layout::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  background-color: var(--color-divider);
+}
+
 #searchbox {
   width: 24rem;
   display: none;
@@ -810,6 +821,16 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   text-align: left;
   padding: 0.25rem 0.5rem;
   border-radius: 5px;
+  font-weight: 500;
+
+  &:hover {
+    background-color: oklch(var(--color-brand) / 0.06);
+    color: oklch(var(--color-brand) / 1);
+  }
+}
+
+.sidebar__container button.sidebar__toggle--ancestor {
+  font-weight: 600;
 }
 
 .sidebar__chevron {
@@ -837,6 +858,12 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   border-radius: 5px;
   color: oklch(0 0 0 / 0.75);
   text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  &:hover {
+    background-color: oklch(var(--color-brand) / 0.08);
+    color: oklch(var(--color-brand));
+  }
 }
 
 .sidebar__link--current {
@@ -848,18 +875,31 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 
 .sidebar__toc {
   #TableOfContents {
-    padding: 0.25rem 0.75rem;
-    margin: 2px 0.5rem 2px 0;
-    border-radius: 5px;
+    padding: 0 0.75rem 0 0;
+    margin: 0.5rem 0.25rem 0.5rem 0.8rem;
+    border-left: 1px solid var(--color-divider);
     color: oklch(0 0 0 / 0.75);
 
+    a {
+      color: oklch(0 0 0 / 0.75);
+      text-decoration: none;
+    }
+
     &:empty {
       display: none;
     }
 
     li {
       padding: 0.25rem 0.75rem;
     }
+
+    li:first-child {
+      padding-top: 0;
+    }
+
+    li:last-child {
+      padding-bottom: 0;
+    }
   }
 }
 

layouts/partials/sidebar-list.html

@@ -9,27 +9,30 @@
     {{- $isAncestor := .IsAncestor $currentPage -}}
     {{- $shouldExpand := or $onPage $isAncestor -}}
     {{- $sectionID := printf "section-%s" (urlize .Permalink) -}}
+
     {{ if eq .Kind "section" }}
-    <li class="sidebar__section">
-      <button
-        class="sidebar__toggle"
-        aria-expanded="{{ $shouldExpand }}"
-        aria-controls="{{ $sectionID }}"
-      >
-        <span class="sidebar__chevron {{ if $shouldExpand }}sidebar__chevron--open{{ end }}">
-          {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
-        </span>
-        <span class="sidebar__toggle-text">{{ .Title }}</span>
-      </button>
-      <div
-        id="{{ $sectionID }}"
-        class="sidebar__children"
-        {{ if not $shouldExpand }}hidden{{ end }}
-      >
-        {{ partial "sidebar-list.html" (dict 
-          "firstSection" . "currentUrl" $currentUrl "currentPage" $currentPage) }}
-      </div>
-    </li>
+      <li class="sidebar__section">
+        <button
+          class="sidebar__toggle {{ if $isAncestor }}sidebar__toggle--ancestor{{ end }}"
+          aria-expanded="{{ $shouldExpand }}"
+          aria-controls="{{ $sectionID }}"
+        >
+          <span class="sidebar__chevron {{ if $shouldExpand }}sidebar__chevron--open{{ end }}">
+            {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
+          </span>
+          <span class="sidebar__toggle-text">{{ .Title }}</span>
+        </button>
+        <div
+          id="{{ $sectionID }}"
+          class="sidebar__children"
+          {{ if not $shouldExpand }}hidden{{ end }}
+        >
+          {{ partial "sidebar-list.html" (dict
+            "firstSection" . "currentUrl" $currentUrl "currentPage" $currentPage)
+          }}
+        </div>
+      </li>
+
     {{ else if eq .Kind "page" }}
       <li class="sidebar__page">
         <a
@@ -39,13 +42,13 @@
         >
           {{ .Title }}
         </a>
+
         {{ if $onPage }}
           {{ with .TableOfContents }}
             <div class="sidebar__toc" id="TableOfContents">{{ . }}</div>
           {{ end }}
         {{ end }}
       </li>
-      
     {{ end }}
   {{ end }}
 </ul>