diff --git a/src/components/ColorModeToggler/index.jsx b/src/components/ColorModeToggler/index.jsx index 8938a1f50c1..cad8b6375fb 100644 --- a/src/components/ColorModeToggler/index.jsx +++ b/src/components/ColorModeToggler/index.jsx @@ -25,7 +25,7 @@ export default function ColorModeToggle({className = ''}) { )} - {`${colorMode} Mode`} +
{`${colorMode}`} Mode
); } diff --git a/src/components/ColorModeToggler/styles.module.css b/src/components/ColorModeToggler/styles.module.css index 055bf3bbffc..a8e3c3d9f2d 100644 --- a/src/components/ColorModeToggler/styles.module.css +++ b/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; + } +} + diff --git a/src/components/DocsCategoryDropdown/index.jsx b/src/components/DocsCategoryDropdown/index.jsx index 7df7e839a7e..9dd5b9d4b94 100644 --- a/src/components/DocsCategoryDropdown/index.jsx +++ b/src/components/DocsCategoryDropdown/index.jsx @@ -90,7 +90,7 @@ function DocsCategoryDropdown({ dropdownCategory }) { export const DocsCategoryDropdownLinkOnly = ({ title, link }) => { return (
- {title} + {title}
); } diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css index 462a1d08e29..0df22a5bce2 100644 --- a/src/components/DocsCategoryDropdown/styles.module.css +++ b/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,14 +63,14 @@ } [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; @@ -55,8 +78,11 @@ 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; + } +} + diff --git a/src/components/Navigation/styles.scss b/src/components/Navigation/styles.scss index 5e2f8740eb8..ac631283831 100644 --- a/src/components/Navigation/styles.scss +++ b/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; + } +} + diff --git a/src/css/custom.scss b/src/css/custom.scss index 1f9a1af698a..9f33b949736 100644 --- a/src/css/custom.scss +++ b/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; } diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js index 96fdee5e745..aa3ebb8715b 100644 --- a/src/theme/Navbar/Content/index.js +++ b/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', diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css index 13f2c9b13d1..f3ff86c493a 100644 --- a/src/theme/Navbar/Content/styles.module.css +++ b/src/theme/Navbar/Content/styles.module.css @@ -9,12 +9,13 @@ grid-template-columns: 1fr auto; align-items: center; padding: 0.5rem 2rem; - gap: 1rem; + gap: 2rem; border-bottom: 1px solid var(--click-color-stroke); border-top: 1px solid var(--click-color-stroke); height: 3.5rem; } + .navRight { margin-left: auto; right: 2rem; @@ -51,6 +52,11 @@ .navRight { display: flex; } + + .navRight .githubStars { + display: flex; + } + } @media screen and (min-width: 1024px) { @@ -64,13 +70,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 +110,8 @@ } .dropdownCategoriesContainer { - overflow-x: auto; + display: flex; + justify-content: space-between; width: 100%; max-width: 100%; white-space: wrap; @@ -122,9 +128,11 @@ } @media (max-width: 640px) { + :global .navbar-color-toggle span { display: none; } + .navRight a { display: none; } @@ -132,4 +140,28 @@ .githubStars { display: none; } -} \ No newline at end of file + + .click-button .primary-btn { + padding-left: 10px; + padding-right: 10px; + } + +} + +@media (min-width: 1250px) { + .dropdownCategoriesContainer { + display:inline-block; + } +} + +@media screen and (max-width: 1100px) { + .navRight .githubStars { + display: none; + } +} + +@media screen and (max-width: 1100px) { + .secondaryMenu { + gap:0; + } +}