Merge pull request #2918 from ClickHouse/p_issue_215

highlight top selected menu

Author: gingerwizard

sidebars.js

@@ -1443,7 +1443,7 @@ const sidebars = {
         },
       ],
     },
-    ],
+  ],
   russia: [
     {
       type: "autogenerated",

src/components/DocsCategoryDropdown/index.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import Link from '@docusaurus/Link'
+import Link from '@docusaurus/Link';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 
 function DocsCategoryDropdown({ dropdownCategory }) {
@@ -46,6 +47,19 @@ function DocsCategoryDropdown({ dropdownCategory }) {
     }
   }, [isOpen]); // This runs when the dropdown is opened
 
+  let sidebar = null;
+
+  // Safely call useDocsSidebar
+  try {
+    sidebar = useDocsSidebar();
+  } catch (e) {
+  }
+
+  // Guard against undefined sidebar
+  const isSelected = sidebar && sidebar.name && dropdownCategory
+    ? sidebar.name === dropdownCategory.sidebar
+    : false;
+
   return (
     <div
       className={styles.docsNavDropdownContainer}
@@ -56,7 +70,9 @@ function DocsCategoryDropdown({ dropdownCategory }) {
         className={styles.docsNavDropdownToolbarLink}
         ref={triggerRef} // Attach the ref to the individual link that triggers the dropdown
       >
-        <Link className={styles.docsNavDropdownToolbarTopLevelLink} href={dropdownCategory.link}>{dropdownCategory.title}</Link> <DropdownCaret />
+        <Link className={`${styles.docsNavDropdownToolbarTopLevelLink} ${
+            isSelected ? styles.docsNavSelected : ''
+          }`} href={dropdownCategory.link}>{dropdownCategory.title}</Link> <DropdownCaret />
       </span>
       {isOpen && (
         <DropdownContent

src/components/DocsCategoryDropdown/styles.module.css

@@ -33,6 +33,18 @@
   color: white;
 }
 
+.docsNavSelected {
+  color: black; 
+  text-decoration: underline;
+  text-underline-offset: 4px; 
+}
+
+[data-theme="dark"] .docsNavSelected {
+  color: white; 
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
 .docsNavDropdownMenu {
   position: absolute;
   top: 100%;

src/theme/Navbar/Content/index.js

@@ -42,6 +42,7 @@ function NavbarItems({ items }) {
 const dropdownCategories = [{
   title: 'Getting Started',
   description: 'Learn how to use ClickHouse',
+  sidebar: 'docs',
   link: '/docs',
   menuItems: [
     {
@@ -80,6 +81,7 @@ const dropdownCategories = [{
   {
     title: 'Cloud',
     description: 'The fastest way to deploy ClickHouse',
+    sidebar: 'cloud',
     link: '/docs/en/cloud/overview',
     menuItems: [
       {
@@ -122,6 +124,7 @@ const dropdownCategories = [{
   {
     title: 'Managing Data',
     description: 'How to manage data in ClickHouse',
+    sidebar: 'managingData',
     link: '/docs/en/updating-data',
     menuItems: [
       {
@@ -149,6 +152,7 @@ const dropdownCategories = [{
   {
     title: 'Server Admin',
     description: 'Manage and deploy ClickHouse',
+    sidebar: 'serverAdmin',
     link: '/docs/en/architecture/introduction',
     menuItems: [
       {
@@ -181,6 +185,7 @@ const dropdownCategories = [{
   {
     title: 'SQL Reference',
     description: 'Reference documentation for ClickHouse features',
+    sidebar: 'sqlreference',
     link: '/docs/en/sql-reference',
     menuItems: [
       {
@@ -208,6 +213,7 @@ const dropdownCategories = [{
   {
     title: 'Integrations',
     description: 'Integrations, clients, and drivers to use with ClickHouse',
+    sidebar: 'integrations',
     link: '/docs/en/integrations',
     menuItems: [
       {
@@ -255,6 +261,7 @@ const dropdownCategories = [{
   {
     title: 'chDB',
     description: 'chDB is an embedded version of ClickHouse',
+    sidebar: 'chdb',
     link: '/docs/en/chdb',
     menuItems: [
       {
@@ -277,6 +284,7 @@ const dropdownCategories = [{
   {
     title: 'About',
     link: '/docs/en/about-clickhouse',
+    sidebar: 'aboutClickHouse',
     description: 'Learn more about ClickHouse',
     menuItems: [
       {