Add sidebar group icons and fix homepage sidebar

_site/customizations/sidebar-icons.js

@@ -0,0 +1,50 @@
+(function () {
+  'use strict';
+
+  var ICON_PATHS = {
+    'Setup': 'M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z',
+    'Sample datasets': 'M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z'
+  };
+
+  var NS = 'http://www.w3.org/2000/svg';
+
+  function makeSvg(pathD) {
+    var svg = document.createElementNS(NS, 'svg');
+    svg.setAttribute('width', '16');
+    svg.setAttribute('height', '16');
+    svg.setAttribute('fill', 'currentColor');
+    svg.setAttribute('viewBox', '0 0 256 256');
+    svg.style.cssText = 'display:inline-block;flex-shrink:0;';
+    var path = document.createElementNS(NS, 'path');
+    path.setAttribute('d', pathD);
+    svg.appendChild(path);
+    return svg;
+  }
+
+  // DOM structure for group items:
+  // li[data-title][data-group-tag] > button > div > span (text label)
+  function injectIcons() {
+    Object.keys(ICON_PATHS).forEach(function (title) {
+      var li = document.querySelector('li[data-title="' + title + '"][data-group-tag]');
+      if (!li || li.dataset.chSidebarIcon) return;
+
+      var span = li.querySelector('button > div > span');
+      if (!span) return;
+
+      var labelDiv = span.parentElement;
+      li.dataset.chSidebarIcon = '1';
+      labelDiv.style.cssText = 'display:flex;align-items:center;gap:6px;';
+      labelDiv.insertBefore(makeSvg(ICON_PATHS[title]), span);
+    });
+  }
+
+  // ── Init ─────────────────────────────────────────────────────────────────
+  var observer = new MutationObserver(injectIcons);
+  observer.observe(document.documentElement, { childList: true, subtree: true });
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', injectIcons);
+  } else {
+    injectIcons();
+  }
+})();

_site/styles.css

@@ -2,8 +2,24 @@
    locks body scroll and the scrollbar disappears. react-remove-scroll
    compensates with margin-right on body, but that double-compensates when
    the gutter is already reserved — zero it out. */
+/* Hero cards on the home page */
+.dark .ch-hero-card {
+    background-color: #191919 !important;
+    border-color: #2B2B2B !important;
+}
+
 html {
     scrollbar-gutter: stable;
+    /* Override Inkeep's default dark overlay color (rgba(136,144,150,0.5) — grey/light)
+       via CSS custom property inheritance into the shadow DOM. */
+    --ikp-color-overlay-dark: rgba(0, 0, 0, 0.8);
+}
+
+/* Belt-and-suspenders: if the Inkeep dialog overlay is portaled to document.body
+   (outside the shadow root), target it directly. */
+[data-radix-dialog-overlay],
+[data-overlay] {
+    background-color: rgba(0, 0, 0, 0.8) !important;
 }
 
 /* Override Mintlify prose link color rules for CTA buttons.

docs.json

@@ -9,7 +9,7 @@
   },
   "background": {
     "color": {
-      "dark": "#1D1D1D",
+      "dark": "#151515",
       "light": "#FFFFFF"
     }
   },
@@ -57,6 +57,9 @@
     },
     {
       "src": "/_site/customizations/clickhouse-sql-highlight.js"
+    },
+    {
+      "src": "/_site/customizations/sidebar-icons.js"
     }
   ],
   "navigation": {

get-started/navigation.json

@@ -2,9 +2,10 @@
   "item": "Get started",
   "icon": "/images/icons/icon-get-started.svg",
   "pages": [
-    "index",
+    {"page": "index", "icon": "/images/menu-icon-house.svg"},
     {
       "group": "Get started",
+      "icon": "/images/menu-icon-lightning.svg",
       "pages": [
         {
           "group": "FAQ",
@@ -33,6 +34,7 @@
     },
     {
       "group": "Setup",
+      "icon": "/images/menu-icon-gear.svg",
       "root": "get-started/setup/install",
       "expanded": true,
       "pages": [
@@ -134,6 +136,7 @@
     },
     {
       "group": "Sample datasets",
+      "icon": "/images/menu-icon-database.svg",
       "expanded": true,
       "root": "get-started/sample-datasets/index",
       "pages": [

get-started/sample-datasets/index.mdx

@@ -2,6 +2,7 @@
 description: 'Get started with ClickHouse using our tutorials and example datasets'
 keywords: ['clickhouse', 'install', 'tutorial', 'sample', 'datasets']
 sidebarTitle: 'Overview'
+icon: '/images/menu-icon-database.svg'
 slug: /getting-started/example-datasets/
 title: 'Tutorials and example datasets'
 doc_type: 'landing-page'

get-started/setup/install.mdx

@@ -2,6 +2,7 @@
 slug: /install
 title: 'Install ClickHouse'
 sidebarTitle: 'Install'
+icon: '/images/menu-icon-gear.svg'
 description: 'Choose how to install ClickHouse — Cloud, a platform-specific package, Docker, or a migration from another database.'
 keywords: ['clickhouse', 'install', 'getting started', 'quick start']
 doc_type: 'landing-page'