From 9daad778548b70558e11559e847a40bdc3a3322b Mon Sep 17 00:00:00 2001 From: Shaun Struwig <41984034+Blargian@users.noreply.github.com> Date: Thu, 30 Jan 2025 21:53:09 +0100 Subject: [PATCH 1/5] fix horrendous menu styling --- src/components/DocsCategoryDropdown/styles.module.css | 1 - src/theme/Navbar/Content/styles.module.css | 10 +++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css index 462a1d08e29..b1edc50f17e 100644 --- a/src/components/DocsCategoryDropdown/styles.module.css +++ b/src/components/DocsCategoryDropdown/styles.module.css @@ -9,7 +9,6 @@ cursor: default; color: #414040; color: black; - margin-right: 30px; } .docsNavDropdownToolbarLink:hover { diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css index 13f2c9b13d1..eab1b9634d1 100644 --- a/src/theme/Navbar/Content/styles.module.css +++ b/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; From 0114aed3228968d50babe7f80d4df1ba28e5dfa3 Mon Sep 17 00:00:00 2001 From: Shaun Struwig <41984034+Blargian@users.noreply.github.com> Date: Mon, 3 Feb 2025 11:12:44 +0100 Subject: [PATCH 2/5] Make Knowledgebase -> KB on media breakpoint --- src/components/DocsCategoryDropdown/index.jsx | 2 +- src/css/custom.scss | 13 +++++++++++++ src/theme/Navbar/Content/index.js | 4 ++-- 3 files changed, 16 insertions(+), 3 deletions(-) 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/css/custom.scss b/src/css/custom.scss index abfb112ad7c..22654553107 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1264,3 +1264,16 @@ input::-ms-input-placeholder { /* Microsoft Edge */ #437EEF; } } + +/* Fixes for the long menu bar */ +@media (max-width: 1103px) { + + .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"]::before { + content: "KB"; + display: inline-block; + } + + .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"] span{ + display: none; + } +} diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js index 1d4488f4bf7..11dca718123 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', From b43e738bd836fe344a5f23ab976da799ef471c3c Mon Sep 17 00:00:00 2001 From: Shaun Struwig <41984034+Blargian@users.noreply.github.com> Date: Mon, 3 Feb 2025 17:55:49 +0100 Subject: [PATCH 3/5] left align menu items --- .../DocsCategoryDropdown/styles.module.css | 56 ++++++++++++------- src/theme/Navbar/Content/index.js | 2 +- 2 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css index b1edc50f17e..4df66a683de 100644 --- a/src/components/DocsCategoryDropdown/styles.module.css +++ b/src/components/DocsCategoryDropdown/styles.module.css @@ -1,11 +1,24 @@ .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); + color: var(--ch-nav-v2-link-hover-color) !important; + text-decoration: none + } } .docsNavDropdownToolbarLink, .docsNavDropdownToolbarTopLevelLink { font-weight: bold; - font-size: 14px; + font-size: 0.875rem; cursor: default; color: #414040; color: black; @@ -54,8 +67,10 @@ 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; } @media (max-width: 768px) { @@ -83,23 +98,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); } @@ -111,7 +130,6 @@ border-top: 1px solid var(--click-color-stroke); width: 100%; margin: 0; - margin-top: 10px; margin-bottom: 5px; } @@ -121,13 +139,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; @@ -142,24 +159,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 { diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js index 11dca718123..42d9060e85b 100644 --- a/src/theme/Navbar/Content/index.js +++ b/src/theme/Navbar/Content/index.js @@ -188,7 +188,7 @@ const dropdownCategories = [{ ] }, { - title: 'SQL Reference', + title: 'Reference', description: 'Reference documentation for ClickHouse features', sidebar: 'sqlreference', link: '/docs/en/sql-reference', From d9d80aec9aeded62d3c32a6d1c909bea4c7b8b41 Mon Sep 17 00:00:00 2001 From: Shaun Struwig <41984034+Blargian@users.noreply.github.com> Date: Tue, 4 Feb 2025 12:47:18 +0100 Subject: [PATCH 4/5] improve styling --- .../DocsCategoryDropdown/styles.module.css | 22 ++++++++++++++----- src/css/custom.scss | 2 +- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css index 4df66a683de..482af0dd93c 100644 --- a/src/components/DocsCategoryDropdown/styles.module.css +++ b/src/components/DocsCategoryDropdown/styles.module.css @@ -11,11 +11,22 @@ &:hover, &.hover { background-color: var(--ch-nav-v2-link-hover-bg); - color: var(--ch-nav-v2-link-hover-color) !important; - text-decoration: none + 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: 0.875rem; @@ -42,7 +53,7 @@ } [data-theme="dark"] .docsNavDropdownToolbarLink:hover, [data-theme="dark"] .docsNavDropdownToolbarTopLevelLink:hover { - color: white; + color: #FAFF69; } .docsNavSelected { @@ -52,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; @@ -71,6 +82,7 @@ border-radius: 10px; opacity: 1; transition: opacity 0.3s ease-in-out; + transform: translateY(30px); } @media (max-width: 768px) { diff --git a/src/css/custom.scss b/src/css/custom.scss index 22654553107..6fdc9a566d5 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1266,7 +1266,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */ } /* Fixes for the long menu bar */ -@media (max-width: 1103px) { +@media (max-width: 1180px) { .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"]::before { content: "KB"; From 10abc02478c47e4e6ac2c26fed22a01a182cf3e9 Mon Sep 17 00:00:00 2001 From: Shaun Struwig <41984034+Blargian@users.noreply.github.com> Date: Wed, 5 Feb 2025 13:17:59 +0100 Subject: [PATCH 5/5] better handle menus on resizing of window --- src/components/ColorModeToggler/index.jsx | 2 +- .../ColorModeToggler/styles.module.css | 14 ++++++++- .../DocsCategoryDropdown/styles.module.css | 14 +++++++++ src/components/Navigation/styles.scss | 18 +++++++++++ src/css/custom.scss | 10 +++++- src/theme/Navbar/Content/styles.module.css | 31 ++++++++++++++++++- 6 files changed, 85 insertions(+), 4 deletions(-) diff --git a/src/components/ColorModeToggler/index.jsx b/src/components/ColorModeToggler/index.jsx index 8938a1f50c1..64c3d2890e6 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..694e970ee06 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,15 @@ white-space: nowrap; } +@media (max-width: 1100px) { + .themeModeText { + display: none; + } +} + +@media (max-width: 997px) { + .themeModeText { + display: block; + } +} + diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css index 482af0dd93c..4aed17f819a 100644 --- a/src/components/DocsCategoryDropdown/styles.module.css +++ b/src/components/DocsCategoryDropdown/styles.module.css @@ -197,3 +197,17 @@ [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; + } +} \ No newline at end of file diff --git a/src/components/Navigation/styles.scss b/src/components/Navigation/styles.scss index 5e2f8740eb8..32fa2df43f3 100644 --- a/src/components/Navigation/styles.scss +++ b/src/components/Navigation/styles.scss @@ -404,3 +404,21 @@ 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; + } +} \ No newline at end of file diff --git a/src/css/custom.scss b/src/css/custom.scss index 6fdc9a566d5..e6f19e61510 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -869,6 +869,7 @@ img { } .dropdown { + & > .navbar__link:after { border: none; background: var(--ifm-menu-link-sublist-icon); @@ -885,6 +886,13 @@ img { } } +@media screen and (max-width: 1100px) { + .dropdown { + padding-right: 2px; + padding-left: 20px; + } +} + .markdown { table { border-radius: 4px; @@ -1266,7 +1274,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */ } /* Fixes for the long menu bar */ -@media (max-width: 1180px) { +@media (max-width: 1250px) { .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"]::before { content: "KB"; diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css index eab1b9634d1..c92ac4fc5cf 100644 --- a/src/theme/Navbar/Content/styles.module.css +++ b/src/theme/Navbar/Content/styles.module.css @@ -15,6 +15,7 @@ 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) { @@ -132,4 +138,27 @@ .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; + } +}