Fix menu overflow

src/components/DocsCategoryDropdown/index.jsx

@@ -90,7 +90,7 @@ function DocsCategoryDropdown({ dropdownCategory }) {
 export const DocsCategoryDropdownLinkOnly = ({ title, link }) => {
   return (
     <div className={styles.docsNavDropdownContainer}>
-      <Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}>{title}</Link>
+      <Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}><span>{title}</span></Link>
     </div>
   );
 }

src/components/DocsCategoryDropdown/styles.module.css

@@ -1,15 +1,38 @@
 .docsNavDropdownContainer {
+  padding: 8px;
+  border-radius: 10px;
   position: relative;
   display: inline-block;
+  color: var(--ch-nav-v2-link-color);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  &:hover,
+  &.hover {
+    background-color: var(--ch-nav-v2-link-hover-bg);
+    text-decoration: none;
+    color: #FAFF69;
+  }
 }
 
+.docsNavDropdownContainer::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -30px; /* Adjust this for the hover area extension */
+  width: 100%;
+  height: 30px; /* Must match the bottom value */
+  pointer-events: auto;
+}
+
+
 .docsNavDropdownToolbarLink, .docsNavDropdownToolbarTopLevelLink {
   font-weight: bold;
-  font-size: 14px;
+  font-size: 0.875rem;
   cursor: default;
   color: #414040;
   color: black;
-  margin-right: 30px;
 }
 
 .docsNavDropdownToolbarLink:hover {
@@ -30,7 +53,7 @@
 }
 
 [data-theme="dark"] .docsNavDropdownToolbarLink:hover, [data-theme="dark"] .docsNavDropdownToolbarTopLevelLink:hover {
-  color: white;
+  color: #FAFF69;
 }
 
 .docsNavSelected {
@@ -40,23 +63,26 @@
 }
 
 [data-theme="dark"] .docsNavSelected {
-  color: white; 
+  color: #FAFF69;
   text-decoration: underline;
   text-underline-offset: 4px;
 }
 
 .docsNavDropdownMenu {
   position: absolute;
-  top: 100%;
+  top: calc(100% + 30px);
   left: 0;
   z-index: 9999 !important;
   min-width: 300px;
   max-width: 600px;
   background-color: white;
   border: 1px solid var(--click-color-stroke);
   filter: drop-shadow(0px 2px 2px rgba(50, 50, 50, 0.1));
-  padding: 15px 10px 20px 10px;
-  border-radius: 4px;
+  padding: 10px 10px 10px 10px;
+  border-radius: 10px;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+  transform: translateY(30px);
 }
 
 @media (max-width: 768px) {
@@ -84,23 +110,27 @@
 
 [data-theme="dark"] .docsNavDropdownMenu {
   color: white;
-  background-color: #282828;
+  background-color: #1F1F1C;
   border: 1px solid #4B4B4B;
   filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.5));
 }
 
+[data-theme="light"] .docsNavDropdownMenu {
+  color: black;
+}
+
 .docsNavMenuHeader {
-  color: var(--ifm-toc-link-color);
-  margin-left: 10px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
+[data-theme="light"] .docsNavMenuHeader {
+  color: black;
+}
+
+
 .docsNavMenuDescription {
-  margin-top: 5px;
-  margin-bottom: 10px;
-  margin-left: 10px;
-  font-size: 14px;
+  font-size: 0.75rem;
   color: var(--ifm-toc-link-color);
 }
 
@@ -112,7 +142,6 @@
   border-top: 1px solid var(--click-color-stroke);
   width: 100%;
   margin: 0;
-  margin-top: 10px;
   margin-bottom: 5px;
 }
 
@@ -122,13 +151,12 @@
 
 .docsNavMenuItems {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
+  grid-template-columns: 1fr;
   width: 100%;
 }
 
 .docsNavMenuItem {
-  padding: 10px;
+  padding: 8px;
   max-width: 100%;
   word-wrap: break-word;
   word-break: break-word;
@@ -143,24 +171,23 @@
 }
 
 [data-theme="dark"] .docsNavHovered {
-  background-color: #3a3a3a;
+  background-color: #1F1F1C;
 }
 
 .docsNavItemTitle {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: black;
   font-weight: bold;
 }
 
 [data-theme="dark"] .docsNavItemTitle {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #FCFF74;
 }
 
 .docsNavItemDescription {
   color: var(--ifm-toc-link-color);
-  font-size: 14px;
-  margin-top: 4px;
+  font-size: 0.75rem;
 }
 
 [data-theme="dark"] .docsNavItemDescription {

src/css/custom.scss

@@ -1264,3 +1264,16 @@ input::-ms-input-placeholder { /* Microsoft Edge */
     #437EEF;
   }
 }
+
+/* Fixes for the long menu bar */
+@media (max-width: 1180px) {
+
+  .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"]::before {
+    content: "KB";
+    display: inline-block;
+  }
+
+  .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"] span{
+    display: none;
+  }
+}

src/theme/Navbar/Content/index.js

@@ -40,7 +40,7 @@ function NavbarItems({ items }) {
 // TODO: Move this to a config file
 // Important note: The link is either the slug (iff one is set) or the file path.
 const dropdownCategories = [{
-  title: 'Getting Started',
+  title: 'Get Started',
   description: 'Learn how to use ClickHouse',
   sidebar: 'docs',
   link: '/docs',
@@ -122,7 +122,7 @@ const dropdownCategories = [{
     ]
   },
   {
-    title: 'Managing Data',
+    title: 'Manage Data',
     description: 'How to manage data in ClickHouse',
     sidebar: 'managingData',
     link: '/docs/en/updating-data',
@@ -188,7 +188,7 @@ const dropdownCategories = [{
     ]
   },
   {
-    title: 'SQL Reference',
+    title: 'Reference',
     description: 'Reference documentation for ClickHouse features',
     sidebar: 'sqlreference',
     link: '/docs/en/sql-reference',

src/theme/Navbar/Content/styles.module.css

@@ -8,8 +8,8 @@
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  padding: 0.5rem 2rem;
-  gap: 1rem;
+  padding: 0.5rem 1.5rem;
+  gap: 2rem;
   border-bottom: 1px solid var(--click-color-stroke);
   border-top: 1px solid var(--click-color-stroke);
   height: 3.5rem;
@@ -64,13 +64,12 @@
   flex-wrap: nowrap;
   max-width: 100%;
   overflow: auto;
-  gap: 2rem;
+  gap: 1rem;
 }
 
 .secondaryMenuRight {
   display: flex;
   flex-wrap: nowrap;
-  gap: 1rem;
 }
 
 .secondaryMenuLeft > *, .secondaryMenuRight a, .secondaryMenuRight button {
@@ -105,7 +104,8 @@
 }
 
 .dropdownCategoriesContainer {
-  overflow-x: auto;
+  display: flex;
+  justify-content: space-between;
   width: 100%;
   max-width: 100%;
   white-space: wrap;