Merge pull request #333 from codex-team/ui/sidebar-top-level-typography

Sidebar: bold top-level items only; tighter spacing after collapsed sections

Author: Dobrunia

package.json

@@ -1,7 +1,7 @@
 {
   "name": "codex.docs",
   "license": "Apache-2.0",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "type": "module",
   "bin": {
     "codex.docs": "dist/backend/app.js"

src/backend/views/components/sidebar-section.twig

@@ -1,9 +1,9 @@
 {% set is_leaf = node.children is not defined or node.children is empty %}
-<section class="docs-sidebar__section{{ nested ? ' docs-sidebar__section--nested' : '' }}{{ is_leaf ? ' docs-sidebar__section--leaf' : '' }}" data-id="{{ node._id }}">
+<section class="docs-sidebar__section{{ nested ? ' docs-sidebar__section--nested' : ' docs-sidebar__section--root' }}{{ is_leaf ? ' docs-sidebar__section--leaf' : '' }}" data-id="{{ node._id }}">
   <a class="docs-sidebar__section-title-wrapper"
     href="{{ node.uri ? '/' ~ node.uri : '/page/' ~ node._id }}"
   >
-    <div class="docs-sidebar__section-title {{ page is defined and toString(page._id) == toString(node._id) ? 'docs-sidebar__section-title--active' : '' }}">
+    <div class="docs-sidebar__section-title{% if not nested %} docs-sidebar__section-title--root{% endif %}{% if page is defined and toString(page._id) == toString(node._id) %} docs-sidebar__section-title--active{% endif %}">
       <span>
         {{ node.title | striptags }}
       </span>

src/frontend/styles/components/sidebar.pcss

@@ -123,23 +123,6 @@
       margin-top: 2px;
     }
 
-    &--leaf {
-      .docs-sidebar__section-title {
-        font-size: 14px;
-        line-height: 21px;
-        height: 29px;
-
-        @media (--mobile) {
-          font-size: 16px;
-          line-height: 21px;
-        }
-      }
-
-      .docs-sidebar__section-title--active {
-        color: white;
-      }
-    }
-
     &--hidden {
       display: none;
     }
@@ -202,12 +185,30 @@
       /* plain radius: --squircle uses mask-box-image and gets clipped by overflow:hidden on ancestors */
       border-radius: 8px;
     }
+  }
 
-    &:has(.docs-sidebar__section-toggler) {
-      font-weight: 700;
+  /* 1st-level title row (see sidebar-section.twig: --root). */
+  &__section-title--root {
+    font-weight: 700;
+  }
+
+  /* Deeper levels: one style for all nested items. */
+  &__section--nested &__section-title {
+    font-size: 14px;
+    line-height: 21px;
+    height: 29px;
+    font-weight: 400;
+
+    @media (--mobile) {
+      font-size: 16px;
+      line-height: 21px;
     }
   }
 
+  .docs-sidebar__section--root.docs-sidebar__section--collapsed + .docs-sidebar__section--root {
+    margin-top: 12px;
+  }
+
   &__section-title > span {
     white-space: nowrap;
     overflow: hidden;