Merge pull request #3177 from Blargian/fix_top_level_menu

Fix menu overflow

Author: gingerwizard

src/components/ColorModeToggler/index.jsx

@@ -25,7 +25,7 @@ export default function ColorModeToggle({className = ''}) {
           <path d="M8.7227 0.724664C8.7227 0.330045 8.39191 0 8.0036 0C7.60809 0 7.2773 0.330045 7.2773 0.724664V2.18834C7.2773 2.57578 7.60809 2.90583 8.0036 2.90583C8.39191 2.90583 8.7227 2.57578 8.7227 2.18834V0.724664ZM11.5991 3.4009C11.3258 3.67354 11.3258 4.13274 11.6063 4.41256C11.8796 4.6852 12.347 4.69238 12.6274 4.40538L13.6629 3.3722C13.9434 3.09238 13.9362 2.62601 13.6629 2.34619C13.3897 2.07354 12.9222 2.08072 12.649 2.35336L11.5991 3.4009ZM3.37258 4.40538C3.64584 4.6852 4.11326 4.6852 4.38652 4.41256C4.66697 4.14709 4.66697 3.66637 4.4009 3.4009L3.3582 2.35336C3.09213 2.08789 2.61753 2.07354 2.34427 2.34619C2.07101 2.62601 2.06382 3.09238 2.33708 3.36502L3.37258 4.40538ZM7.9964 11.774C10.0602 11.774 11.7717 10.0664 11.7717 8C11.7717 5.93363 10.0602 4.22601 7.9964 4.22601C5.93258 4.22601 4.22112 5.93363 4.22112 8C4.22112 10.0664 5.93258 11.774 7.9964 11.774ZM7.9964 10.4395C6.65888 10.4395 5.55146 9.33453 5.55146 8C5.55146 6.66547 6.65888 5.56054 7.9964 5.56054C9.33393 5.56054 10.4413 6.66547 10.4413 8C10.4413 9.33453 9.33393 10.4395 7.9964 10.4395ZM15.2809 8.71749C15.6692 8.71749 16 8.38744 16 8C16 7.60538 15.6692 7.28251 15.2809 7.28251H13.8211C13.4328 7.28251 13.102 7.60538 13.102 8C13.102 8.38744 13.4328 8.71749 13.8211 8.71749H15.2809ZM0.719101 7.28251C0.330787 7.28251 0 7.60538 0 8C0 8.38744 0.330787 8.71749 0.719101 8.71749H2.17888C2.57438 8.71749 2.90517 8.38744 2.90517 8C2.90517 7.60538 2.57438 7.28251 2.17888 7.28251H0.719101ZM12.6202 11.5946C12.347 11.322 11.8796 11.322 11.5991 11.5946C11.3258 11.8744 11.3258 12.3336 11.6063 12.6135L12.649 13.6538C12.9294 13.9265 13.3897 13.9193 13.6701 13.6395C13.9434 13.3668 13.9434 12.9076 13.6629 12.6278L12.6202 11.5946ZM2.33708 12.6206C2.05663 12.9004 2.05663 13.3668 2.3227 13.6395C2.60315 13.9121 3.07056 13.9193 3.34382 13.6466L4.38652 12.6135C4.66697 12.3336 4.66697 11.8744 4.4009 11.6018C4.12045 11.322 3.65303 11.322 3.37258 11.5946L2.33708 12.6206ZM8.7227 13.8117C8.7227 13.4242 8.39191 13.0942 8.0036 13.0942C7.60809 13.0942 7.2773 13.4242 7.2773 13.8117V15.2753C7.2773 15.6628 7.60809 16 8.0036 16C8.39191 16 8.7227 15.6628 8.7227 15.2753V13.8117Z" fill="currentColor"/>
         </svg>
       )}
-      <span>{`${colorMode} Mode`}</span>
+      <div><span>{`${colorMode}`}</span><span className={styles.themeModeText}> Mode</span></div>
     </button>
   );
 }

src/components/ColorModeToggler/styles.module.css

@@ -3,7 +3,7 @@
   align-items: center;
   cursor: pointer;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 8px;
+  padding: 2px;
   gap: 8px;
   color: var(--click-color-secondary-button-text);
   border: 0;
@@ -19,3 +19,20 @@
   white-space: nowrap;
 }
 
+@media (max-width: 1100px) {
+  .themeModeText {
+    display: none;
+  }
+}
+
+@media (max-width: 997px) {
+  .themeModeText {
+    display: block;
+  }
+
+  .colorModeWrapper {
+    display: flex;
+    gap: 0.3rem;
+  }
+}
+

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 {
@@ -170,3 +197,18 @@
 [data-theme="dark"] .docsNavMenuItem:hover .docsNavItemDescription {
   color: white;
 }
+
+@media screen and (max-width: 1100px) {
+  .docsNavDropdownContainer {
+    padding: 0px;
+  }
+
+  [data-theme="dark"] .docsNavDropdownContainer {
+    background-color: #201c1c;
+  }
+
+  [data-theme="light"] .docsNavDropdownContainer {
+    background-color: white;
+  }
+}
+

src/components/Navigation/styles.scss

@@ -404,3 +404,22 @@ ul.ch-nav-v2-sub-nav-resources {
 .ch-nav-v2-sub-nav-use-cases {
 
 }
+
+@media screen and (max-width: 1100px) {
+  .ch-nav-v2-item > a{
+    padding: 0px;
+  }
+
+  [data-theme="dark"] .ch-nav-v2-item > a {
+    background-color: #201c1c;
+  }
+
+  [data-theme="light"] .ch-nav-v2-item > a {
+    background-color: white;
+  }
+
+  .click-button {
+    padding: 8px;
+  }
+}
+

src/css/custom.scss

@@ -868,6 +868,7 @@ img {
 }
 
 .dropdown {
+
   & > .navbar__link:after {
     border: none;
     background: var(--ifm-menu-link-sublist-icon);
@@ -884,6 +885,13 @@ img {
   }
 }
 
+@media screen and (max-width: 1100px) {
+  .dropdown {
+    padding-right: 2px;
+    padding-left: 20px;
+  }
+}
+
 .markdown {
   table {
     border-radius: 4px;
@@ -1254,6 +1262,19 @@ input::-ms-input-placeholder { /* Microsoft Edge */
   }
 }
 
+/* Fixes for the long menu bar */
+@media (max-width: 1250px) {
+
+  .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"]::before {
+    content: "KB";
+    display: inline-block;
+  }
+
+  .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"] span{
+    display: none;
+  }
+}
+
 .blog-list-page .margin-bottom--xl, .blog-tags-post-list-page .margin-bottom--xl {
   margin-bottom: 1rem !important;
 }

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',