Add Knowledge Base link to navbar

ClickHouse · Nov 4, 2024 · 0d0b69b · 0d0b69b
1 parent 6db063d
commit 0d0b69b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/src/components/DocsCategoryDropdown/index.jsx b/src/components/DocsCategoryDropdown/index.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
+import Link from '@docusaurus/Link'
 import styles from './styles.module.css';
 
 function DocsCategoryDropdown({ dropdownCategory }) {
@@ -69,6 +70,14 @@ function DocsCategoryDropdown({ dropdownCategory }) {
   );
 }
 
+export const DocsCategoryDropdownLinkOnly = ({ title, link }) => {
+  return (
+    <div className={styles.docsNavDropdownContainer}>
+      <Link href={link} className={styles.docsNavDropdownToolbarLink}>{title}</Link>
+    </div>
+  );
+}
+
 const DropdownContent = ({ dropdownCategory, handleMouseLeave, dropdownStyles, dropdownMenuRef }) => {
   const [hovered, setHovered] = useState(null);
   const history = useHistory();

diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css
@@ -12,6 +12,10 @@
   margin-right: 30px;
 }
 
+.docsNavDropdownToolbarLink:hover {
+  text-decoration: none;
+}
+
 .docsNavDropdownToolbarLink:hover {
   color: black;
 }

diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js
@@ -14,7 +14,7 @@ import ScrollableElement from "../../ScrollableElement";
 import ColorModeToggle from "../../../components/ColorModeToggler";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import GlobalMenu from "./GlobalMenu";
-import DocsCategoryDropdown from "../../../components/DocsCategoryDropdown";
+import DocsCategoryDropdown, { DocsCategoryDropdownLinkOnly } from "../../../components/DocsCategoryDropdown";
 import Navigation from "../../../components/Navigation";
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -342,6 +342,7 @@ export default function NavbarContent() {
           {dropdownCategories.map((dropdownCategory, index) => {
             return <DocsCategoryDropdown key={index} dropdownCategory={dropdownCategory} />
           })}
+          <DocsCategoryDropdownLinkOnly title='Knowledge Base' link='/docs/knowledgebase' />
         </div>
         <div
           className={`${styles.secondaryMenuRight} secondary-nav--items-right`}