From faf4ad49edc3b88222ec10879ef24e1861489119 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 7 Jan 2026 12:24:44 -0500
Subject: [PATCH 01/16] navbar
---
docs/docs/reference/cli/_category_.yml | 4 +-
.../reference/project-files/_category_.yml | 2 +-
docs/docusaurus.config.js | 31 +-
docs/src/css/_navbar.scss | 453 +++++++++---------
docs/src/theme/Navbar/index.js | 119 ++---
5 files changed, 291 insertions(+), 318 deletions(-)
diff --git a/docs/docs/reference/cli/_category_.yml b/docs/docs/reference/cli/_category_.yml
index 184af4a2efd..392f4efc2e7 100644
--- a/docs/docs/reference/cli/_category_.yml
+++ b/docs/docs/reference/cli/_category_.yml
@@ -1,4 +1,4 @@
position: 4
label: CLI Reference
-collapsible: true
-collapsed: true
\ No newline at end of file
+collapsible: false
+collapsed: false
\ No newline at end of file
diff --git a/docs/docs/reference/project-files/_category_.yml b/docs/docs/reference/project-files/_category_.yml
index 3a6d2a3edd2..846359dbac7 100644
--- a/docs/docs/reference/project-files/_category_.yml
+++ b/docs/docs/reference/project-files/_category_.yml
@@ -1,4 +1,4 @@
position: 00
label: Project Files
-collapsible: true
+collapsible: false
collapsed: false
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 1e7a88bf22a..d4585a10f0c 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -130,29 +130,34 @@ const config = {
to: "/",
label: "Docs",
position: "left",
- className: "navbar-docs-link",
activeBaseRegex: "^(?!/(reference|api|contact|notes)).*", // Keep Docs active for all doc pages
},
{
- to: "/reference/project-files",
+ type: "dropdown",
label: "Reference",
position: "left",
- className: "navbar-reference-link",
- activeBasePath: "/reference",
- },
- {
- to: "/api/admin/",
- label: "API",
- position: "left",
- className: "navbar-api-link",
- activeBasePath: "/api/admin",
+ to: "/reference/project-files",
+ activeBaseRegex: "^(/reference|/api/admin)",
+ items: [
+ {
+ to: "/reference/project-files",
+ label: "Project Files",
+ },
+ {
+ to: "/reference/cli",
+ label: "CLI Reference",
+ },
+ {
+ to: "/api/admin/",
+ label: "API",
+ }
+ ],
},
{
to: "/contact",
label: "Contact Us",
position: "left",
- className: "navbar-contact-link",
- activeBasePath: "/contact",
+ activeBaseRegex: "^/contact",
},
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 1d4f1c5dfbd..86328191409 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -1,265 +1,256 @@
-
/* =========================
- Search Bar Custom Styles
+ Navbar Styles
========================= */
-.navbar {
- height: 60px;
- padding: 0 16px;
-}
-// all of the navbar items
-.navbar__link {
- height: 70%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0px 12px;
- position: relative;
- transition: color 0.2s ease; /* Smooth text color transition */
-}
-
-// on hover of navbar items
-.navbar__link:hover {
- background: var(--palette_slate_50);
- border-radius: 8px;
- padding: 12px 12px;
-}
-
-// Dark mode hover adjustment
-[data-theme='dark'] .navbar__link:hover {
- background: rgba(255, 255, 255, 0.1);
-}
-// Remove hover background for active items
-.navbar__link--active:hover {
- background: transparent;
+/* Base navbar link styles - all text black, no decorations */
+.navbar .navbar__link {
+ color: var(--ifm-color-black);
+ text-decoration: none;
+ font-weight: 500;
+
+ &:hover {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ }
}
-// Keep default color on hover (don't change text color)
-.navbar__link.navbar-docs-link:hover,
-.navbar__link.navbar-reference-link:hover,
-.navbar__link.navbar-contact-link:hover,
-.navbar__link.navbar-api-link:hover {
- color: var(--ifm-navbar-link-color);
-}
+/* Active navbar item - theme color */
-// But if it's active, keep the primary color even when hovering
-.navbar__link--active.navbar-docs-link:hover,
-.navbar__link--active.navbar-reference-link:hover,
-.navbar__link--active.navbar-contact-link:hover,
-.navbar__link--active.navbar-api-link:hover {
+/* Active navbar link - theme color */
+.navbar .navbar__link--active,
+.navbar__item .navbar__link--active {
color: var(--ifm-color-primary);
+ font-weight: 600;
+ text-decoration: none;
}
-.navbar button[class*="toggleButton"] {
- background: transparent;
- border: none;
- box-shadow: none;
-}
-
-.navbar button[class*="toggleButton"]:hover {
- background: transparent;
- box-shadow: none;
-}
-
-/* Active state styling for navbar links */
-.navbar__link--active.navbar-docs-link,
-.navbar__link--active.navbar-reference-link,
-.navbar__link--active.navbar-contact-link,
-.navbar__link--active.navbar-api-link,
-.navbar__link--active.navbar-icon-link {
- color: var(--ifm-color-primary);
+/* Hover effects with rounded corners for navbar items */
+.navbar .navbar__item {
+ border-radius: 0.375rem;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ }
+
+ .navbar__link {
+ padding: 0.5rem 0.75rem;
+ border-radius: 0.375rem;
+ }
}
-/* Underline that only spans text width */
-.navbar__link--active.navbar-docs-link::after,
-.navbar__link--active.navbar-reference-link::after,
-.navbar__link--active.navbar-contact-link::after,
-.navbar__link--active.navbar-api-link::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- height: 2px;
- background: var(--ifm-color-primary);
- border-radius: 1px 1px 0 0;
- width: calc(100% - 24px);
+/* Dropdown items - black text, no decorations */
+/* Target elements with both navbar__item and dropdown classes */
+.navbar .navbar__item.dropdown {
+ /* Base styles for dropdown link */
+ > .navbar__link {
+ color: var(--ifm-color-black);
+ text-decoration: none;
+
+ &:hover {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ }
+ }
+
+ /* Active dropdown - theme color when any sub-page is active */
+ /* JavaScript adds 'navbar__dropdown--has-active' class when dropdown menu has active item */
+ &.navbar__dropdown--has-active > .navbar__link {
+ color: var(--ifm-color-primary);
+ font-weight: 600;
+ }
+
+ /* Hover effect for dropdown */
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ }
}
-
-// NavBar Icon Link (GitHub and Blog) Change to Icons later
-// NavBar Icon Link (GitHub and Blog) Change to Icons later
-.navbar-icon-link {
- width: 24px;
- height: 24px;
- margin-right: 6px;
- margin-left: 6px;
+/* Dropdown menu items - black text with hover effects */
+.navbar .dropdown__link {
+ color: var(--ifm-color-black);
text-decoration: none;
- color: var(--ifm-menu-color);
- font-size: 0.875rem;
- font-weight: 500;
- transition: color 0.2s;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
+ border-radius: 0.375rem;
+ padding: 0.5rem 0.75rem 0.5rem 1rem;
+ display: block;
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-black);
+ text-decoration: none;
+ background-color: rgba(0, 0, 0, 0.05);
+ }
+
+ /* Active dropdown menu items - theme color */
+ &.dropdown__link--active {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ font-weight: 600;
+ }
}
-.navbar-icon-link:hover {
- background: transparent;
- box-shadow: none;
+/* Custom HTML links (GitHub, Blog) */
+.navbar .navbar-icon-link {
+ color: var(--ifm-color-black);
text-decoration: none;
- color: var(--ifm-menu-color);
-}
-
-// NavBar Search Bar
-.navbar .navbar__items--right .DocSearch-Button {
- background: transparent;
- border: 0.5px solid #e5e7eb;
- border-radius: 8px;
- padding: 12px 12px;
- width: 250px; /* Adjust this value to change width */
- min-width: 150px; /* Minimum width */
- height: 100%;
- position: relative;
- &::after {
- content: "⌘K";
- position: absolute;
- right: 8px;
- top: 50%;
- transform: translateY(-50%);
- font-size: 0.75rem;
- color: var(--docsearch-muted-color);
- font-family: monospace;
- pointer-events: none;
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-black);
+ text-decoration: none;
}
}
-// Dark mode specific fixes for Search Bar
-[data-theme='dark'] .navbar .navbar__items--right .DocSearch-Button {
- background: transparent;
- border: 0.5px solid var(--docsearch-muted-color);
- border-radius: 8px;
- padding: 12px 12px;
-}
-
-[data-theme='dark'] .navbar .navbar__items--right .DocSearch-Button:hover {
- box-shadow: none;
- color: var(--docsearch-muted-color);
- border: 0.5px solid var(--ifm-color-primary);
-}
-
-// On hover of Search Bar
-.navbar .navbar__items--right .DocSearch-Button:hover {
- box-shadow: none;
- color: var(--docsearch-muted-color);
- border: 0.5px solid var(--ifm-color-primary);
-}
-
-// Search Bar Search Icon
-.navbar .navbar__items--right .DocSearch-Search-Icon {
- height: 16px;
- width: 16px;
-}
-
-// Search Bar Search Placeholder
-.navbar .navbar__items--right .DocSearch-Button-Placeholder {
- font-size: 0.875rem;
-}
-
-.navbar .navbar__items--right .DocSearch-Button-Keys {
- display: none;
-}
-
-.DocSearch--active .DocSearch-Footer {
- display: none;
-}
-
-
-
+/* Right-hand navbar items - only for smaller widths */
@media (max-width: 996px) {
- /* Make custom HTML navbar items look like menu__link in mobile menu */
- .navbar .menu__list .menu__link,
- .navbar .menu__list .navbar-icon-link {
- display: flex;
- align-items: center;
- width: 100%;
- gap: 6px;
- padding: 2.5px 9px;
- color: var(--ifm-menu-color);
- font-size: var(--default-font);
- text-decoration: none;
- border-radius: 4px;
- margin: 0;
- background: none;
- box-shadow: none;
+ .navbar .navbar-icon-link {
+ padding: 0.25rem 0rem;
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-primary);
+ }
}
+}
- .navbar .navbar__items--left .navbar-icon-link {
- width: 100%;
- display: flex;
- align-items: center;
+/* Dark mode adjustments */
+[data-theme='dark'] .navbar {
+ .navbar__link {
+ color: var(--ifm-color-white);
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-white);
+ }
}
-
- .navbar .navbar-icon-link {
- display: none !important;
+
+ /* Active navbar item - theme color in dark mode */
+ .navbar__item--has-active-link .navbar__link,
+ .navbar__item .navbar__link--active {
+ color: var(--ifm-color-primary);
}
-
-}
-
-@media (max-width: 768px) {
- .navbar .navbar__item {
- display: none
+
+ .navbar__link--active,
+ .navbar__item .navbar__link--active {
+ color: var(--ifm-color-primary);
}
-}
-
-@media (max-width: 600px) {
- .navbar .navbar__items--right .DocSearch-Button {
- width: 100%;
- min-width: 0;
- margin-left: 0;
- height: 36px;
- box-sizing: border-box;
+
+ /* Hover effects for navbar items in dark mode */
+ .navbar__item {
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+
+ .navbar__item.dropdown {
+ /* Base styles for dropdown link in dark mode */
+ > .navbar__link {
+ color: var(--ifm-color-white);
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-white);
+ }
+ }
+
+ /* Active dropdown in dark mode - theme color */
+ &.navbar__dropdown--has-active > .navbar__link {
+ color: var(--ifm-color-primary);
+ }
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+
+ .dropdown__link {
+ color: var(--ifm-color-white);
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-white);
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+
+ /* Active dropdown menu items - theme color */
+ &.dropdown__link--active {
+ color: var(--ifm-color-primary);
+ }
}
- .navbar .navbar__items--right .DocSearch-Button::after {
- display: none !important;
+
+ .navbar-icon-link {
+ color: var(--ifm-color-white);
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-white);
+ }
+ }
+
+ /* Right-hand navbar items in dark mode - only for smaller widths */
+ @media (max-width: 996px) {
+ .navbar-icon-link {
+ &:hover,
+ &:focus {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+
+ /* Search button styling in dark mode */
+ .navbar__item .DocSearch-Button {
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
}
}
-
-
-/* Hide text on very small screens for right-side items */
-@media (max-width: 480px) {
- .navbar .navbar__items--right .navbar-icon-link {
+/* =========================
+ Mobile Sidebar Panel Styles
+ ========================= */
+.navbar-sidebar {
+ /* Remove mobile icon links */
+ .mobile-nav-icon-links {
display: none;
}
-}
-
-//Mobile Hamburger Menu Header
-
-.navbar-sidebar__brand {
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 16px;
-}
-
-.navbar-sidebar__brand .mobile-nav-icon-links {
- display: flex;
- align-items: center;
- gap: 24px;
-}
-
-.navbar-sidebar__brand .mobile-nav-icon-link {
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.navbar-sidebar__brand .mobile-nav-icon-link img {
- width: 100%;
- height: 100%;
+
+ /* Fix spacing for navbar items in mobile sidebar */
+ .navbar-sidebar__item {
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Fix spacing for dropdown items in mobile sidebar */
+ .navbar-sidebar__item.dropdown {
+ .dropdown__menu {
+ padding: 0.5rem 0;
+ margin: 0;
+ }
+
+ .dropdown__link {
+ padding: 0.625rem 1.5rem 0.625rem 1.75rem;
+ margin: 0.125rem 0;
+ border-radius: 0.375rem;
+ }
+ }
+
+ /* Right-hand items in mobile sidebar - match left-hand styling */
+ .navbar-sidebar__item {
+ /* Apply same styling to search button */
+ .DocSearch-Button {
+ padding: 0.75rem 1rem;
+ margin: 0.25rem 0;
+ border-radius: 0.375rem;
+ width: 100%;
+ justify-content: flex-start;
+ }
+ }
+
+ /* Ensure consistent spacing between all items */
+ .navbar-sidebar__items {
+ padding: 1rem 0.5rem;
+
+ > .navbar-sidebar__item {
+ margin-bottom: 0.25rem;
+ }
+ }
}
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 20c9deffc37..8ddb70de200 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -2,63 +2,7 @@ import { useColorMode } from '@docusaurus/theme-common';
import Navbar from '@theme-original/Navbar';
import { useEffect, useLayoutEffect } from 'react';
-const MOBILE_ICON_LINKS = [
- {
- href: 'https://github.com/rilldata/rill',
- label: 'GitHub',
- src: '/icons/Github.svg',
- },
- {
- href: '/notes',
- label: 'Release Notes',
- src: '/icons/ReleaseNotes.svg',
- },
- {
- href: 'https://www.rilldata.com/blog',
- label: 'Blog',
- src: '/icons/MessageSquareQuote.svg',
- },
-];
-
-function createIconLink({ href, label, src }) {
- const anchor = document.createElement('a');
- anchor.href = href;
- anchor.target = '_blank';
- anchor.rel = 'noopener noreferrer';
- anchor.className = 'mobile-nav-icon-link';
- anchor.setAttribute('aria-label', label);
-
- const img = document.createElement('img');
- img.src = src;
- img.alt = label;
- img.width = 24;
- img.height = 24;
-
- anchor.appendChild(img);
- return anchor;
-}
-
-function ensureSidebarIcons() {
- const brand = document.querySelector('.navbar-sidebar__brand');
- // Check if icons already exist
- if (!brand || brand.querySelector('.mobile-nav-icon-links')) {
- return;
- }
-
- const container = document.createElement('div');
- container.className = 'mobile-nav-icon-links';
-
- MOBILE_ICON_LINKS.forEach((link) => {
- container.appendChild(createIconLink(link));
- });
-
- const closeButton = brand.querySelector('.navbar-sidebar__close');
- if (closeButton) {
- brand.insertBefore(container, closeButton);
- } else {
- brand.appendChild(container);
- }
-}
+// Mobile icon functionality removed
export default function NavbarWrapper(props) {
// We only need colorMode to determine which icon to show.
@@ -80,9 +24,9 @@ export default function NavbarWrapper(props) {
if (!iconContainer) {
iconContainer = document.createElement('span');
iconContainer.className = 'icon-container';
-
+
// Clear existing Docusaurus toggle content (text/emojis)
- btn.innerHTML = '';
+ btn.innerHTML = '';
btn.appendChild(iconContainer);
}
@@ -90,7 +34,7 @@ export default function NavbarWrapper(props) {
// If Dark Mode -> Show Sun (to switch to Light)
// If Light Mode -> Show Moon (to switch to Dark)
const isDark = colorMode === 'dark';
-
+
iconContainer.innerHTML = `
`;
-
+
btn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
});
}, [colorMode]);
- // Handle Mobile Sidebar Icons
+ // Mobile sidebar icons removed - no longer needed
+
+ // Mark dropdown as active when any dropdown menu item is active
useEffect(() => {
- // Observer to inject icons when the mobile menu opens/renders
- const observer = new MutationObserver(() => {
- ensureSidebarIcons();
- });
+ const markActiveDropdowns = () => {
+ // Target elements with both navbar__item and dropdown classes
+ const dropdownItems = document.querySelectorAll('.navbar__item.dropdown');
+ dropdownItems.forEach((dropdownItem) => {
+ const activeDropdownLink = dropdownItem.querySelector('.dropdown__link--active');
+ if (activeDropdownLink) {
+ dropdownItem.classList.add('navbar__dropdown--has-active');
+ } else {
+ dropdownItem.classList.remove('navbar__dropdown--has-active');
+ }
+ });
+ };
+ // Check on mount and when DOM changes
+ markActiveDropdowns();
+ const observer = new MutationObserver(markActiveDropdowns);
+ observer.observe(document.body, { childList: true, subtree: true });
+
+ return () => {
+ observer.disconnect();
+ };
+ }, []);
+
+ // Mark non-dropdown navbar items as active when they contain an active link
+ useEffect(() => {
+ const markActiveNavItems = () => {
+ // Target non-dropdown navbar items
+ const navItems = document.querySelectorAll('.navbar__item:not(.dropdown)');
+ navItems.forEach((navItem) => {
+ const activeLink = navItem.querySelector('.navbar__link--active');
+ if (activeLink) {
+ navItem.classList.add('navbar__item--has-active-link');
+ } else {
+ navItem.classList.remove('navbar__item--has-active-link');
+ }
+ });
+ };
+
+ // Check on mount and when DOM changes
+ markActiveNavItems();
+ const observer = new MutationObserver(markActiveNavItems);
observer.observe(document.body, { childList: true, subtree: true });
- ensureSidebarIcons(); // Initial check
return () => {
observer.disconnect();
- const existing = document.querySelector('.mobile-nav-icon-links');
- if (existing) {
- existing.remove();
- }
};
}, []);
From a86bf89a98aa17c34c3546738e519df6b88080d9 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 7 Jan 2026 12:30:59 -0500
Subject: [PATCH 02/16] Update _navbar.scss
---
docs/src/css/_navbar.scss | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 86328191409..cf543056d8f 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -100,6 +100,17 @@
}
}
+/* DocSearch button - smaller text */
+.navbar .DocSearch-Button {
+ font-size: 0.875rem; /* 14px */
+ min-width: 16rem; /* Increased width */
+ border: .5px solid #e5e7eb;
+
+ .DocSearch-Button-Placeholder {
+ font-size: 0.875rem;
+ }
+}
+
/* Right-hand navbar items - only for smaller widths */
@media (max-width: 996px) {
.navbar .navbar-icon-link {
@@ -186,6 +197,11 @@
}
}
+ /* DocSearch button in dark mode */
+ .DocSearch-Button {
+ border: 0.5px solid rgba(255, 255, 255, 0.2);
+ }
+
/* Right-hand navbar items in dark mode - only for smaller widths */
@media (max-width: 996px) {
.navbar-icon-link {
@@ -242,6 +258,11 @@
border-radius: 0.375rem;
width: 100%;
justify-content: flex-start;
+ font-size: 0.875rem; /* 14px */
+
+ .DocSearch-Button-Placeholder {
+ font-size: 0.875rem;
+ }
}
}
From dfebea8fca5b0d45d11f8af0fa27effa43d99a19 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 7 Jan 2026 15:42:07 -0500
Subject: [PATCH 03/16] 1-3
---
docs/src/css/_navbar.scss | 71 ++++++++++++++++++++++++++++++----
docs/src/theme/Navbar/index.js | 25 ++++++++++++
2 files changed, 88 insertions(+), 8 deletions(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index cf543056d8f..25e1df7cf75 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -14,14 +14,14 @@
}
}
-/* Active navbar item - theme color */
+.navbar__item {
+ padding: 0.75rem 0.5rem;
+}
/* Active navbar link - theme color */
.navbar .navbar__link--active,
.navbar__item .navbar__link--active {
color: var(--ifm-color-primary);
- font-weight: 600;
- text-decoration: none;
}
/* Hover effects with rounded corners for navbar items */
@@ -32,9 +32,11 @@
background-color: rgba(0, 0, 0, 0.05);
}
+ /* Standardized padding for consistent widths */
.navbar__link {
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
+
}
}
@@ -44,19 +46,51 @@
/* Base styles for dropdown link */
> .navbar__link {
color: var(--ifm-color-black);
- text-decoration: none;
+ text-decoration: none;
+ padding-right: 1.5rem; /* Extra space for chevron */
+ position: relative;
&:hover {
color: var(--ifm-color-primary);
text-decoration: none;
}
+
+ /* Hide any default Docusaurus icons/elements */
+ > svg,
+ > .navbar__link-icon,
+ > i {
+ display: none;
+ }
+
+ /* Replace default Docusaurus caret with Rill-style chevron */
+ &::after {
+ content: '';
+ position: absolute;
+ right: 0.5rem;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0;
+ height: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 5px solid currentColor;
+ transition: transform 0.2s ease;
+ pointer-events: none;
+ opacity: 0.7;
+ }
+ }
+
+ /* Rotate chevron when dropdown is open or hovered */
+ &--show > .navbar__link::after,
+ &:hover > .navbar__link::after,
+ > .navbar__link[aria-expanded="true"]::after {
+ transform: translateY(-50%) rotate(180deg);
}
/* Active dropdown - theme color when any sub-page is active */
/* JavaScript adds 'navbar__dropdown--has-active' class when dropdown menu has active item */
&.navbar__dropdown--has-active > .navbar__link {
color: var(--ifm-color-primary);
- font-weight: 600;
}
/* Hover effect for dropdown */
@@ -65,12 +99,17 @@
}
}
+/* Dropdown menu - add breathing room between trigger and popover */
+.navbar .dropdown__menu {
+ margin-top: 2px;
+}
+
/* Dropdown menu items - black text with hover effects */
.navbar .dropdown__link {
color: var(--ifm-color-black);
text-decoration: none;
border-radius: 0.375rem;
- padding: 0.5rem 0.75rem 0.5rem 1rem;
+ padding: 0.375rem 0.75rem 0.375rem 1rem;
display: block;
&:hover,
@@ -84,10 +123,9 @@
&.dropdown__link--active {
color: var(--ifm-color-primary);
text-decoration: none;
- font-weight: 600;
+
}
}
-
/* Custom HTML links (GitHub, Blog) */
.navbar .navbar-icon-link {
color: var(--ifm-color-black);
@@ -161,6 +199,18 @@
&:focus {
color: var(--ifm-color-white);
}
+
+ /* Rill-style chevron in dark mode */
+ &::after {
+ border-top-color: currentColor;
+ }
+ }
+
+ /* Rotate chevron when dropdown is open in dark mode */
+ &--show > .navbar__link::after,
+ &:hover > .navbar__link::after,
+ > .navbar__link[aria-expanded="true"]::after {
+ transform: translateY(-50%) rotate(180deg);
}
/* Active dropdown in dark mode - theme color */
@@ -173,6 +223,11 @@
}
}
+ /* Dropdown menu in dark mode - maintain breathing room */
+ .dropdown__menu {
+ margin-top: 4px;
+ }
+
.dropdown__link {
color: var(--ifm-color-white);
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 8ddb70de200..3ea13fcb6a3 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -100,5 +100,30 @@ export default function NavbarWrapper(props) {
};
}, []);
+ // Add data-text attributes to navbar links for layout shift prevention
+ useEffect(() => {
+ const addDataTextAttributes = () => {
+ const navLinks = document.querySelectorAll('.navbar__link');
+ navLinks.forEach((link) => {
+ // Only add if not already present
+ if (!link.hasAttribute('data-text')) {
+ const text = link.textContent?.trim() || '';
+ if (text) {
+ link.setAttribute('data-text', text);
+ }
+ }
+ });
+ };
+
+ // Run on mount and when DOM changes
+ addDataTextAttributes();
+ const observer = new MutationObserver(addDataTextAttributes);
+ observer.observe(document.body, { childList: true, subtree: true });
+
+ return () => {
+ observer.disconnect();
+ };
+ }, []);
+
return ;
}
From 35e18ab2d11f60028c5d6710ade90d3ea1e265a3 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 7 Jan 2026 15:46:34 -0500
Subject: [PATCH 04/16] 4-5
---
docs/src/css/_navbar.scss | 36 ++++++++++++++++++++-------------
docs/src/theme/Navbar/index.js | 37 +++++++++-------------------------
2 files changed, 32 insertions(+), 41 deletions(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 25e1df7cf75..7bdeb1bf29a 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -6,7 +6,7 @@
.navbar .navbar__link {
color: var(--ifm-color-black);
text-decoration: none;
- font-weight: 500;
+ font-weight: 600;
&:hover {
color: var(--ifm-color-primary);
@@ -22,6 +22,14 @@
.navbar .navbar__link--active,
.navbar__item .navbar__link--active {
color: var(--ifm-color-primary);
+ text-decoration: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 14px;
+ text-decoration-color: var(--ifm-color-primary);
+ text-decoration-style: solid;
+ text-decoration-skip-ink: none;
+ text-decoration-skip: none;
+ text-decoration-skip-ink: none;
}
/* Hover effects with rounded corners for navbar items */
@@ -91,6 +99,15 @@
/* JavaScript adds 'navbar__dropdown--has-active' class when dropdown menu has active item */
&.navbar__dropdown--has-active > .navbar__link {
color: var(--ifm-color-primary);
+ color: var(--ifm-color-primary);
+ text-decoration: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 14px;
+ text-decoration-color: var(--ifm-color-primary);
+ text-decoration-style: solid;
+ text-decoration-skip-ink: none;
+ text-decoration-skip: none;
+ text-decoration-skip-ink: none;
}
/* Hover effect for dropdown */
@@ -142,7 +159,7 @@
.navbar .DocSearch-Button {
font-size: 0.875rem; /* 14px */
min-width: 16rem; /* Increased width */
- border: .5px solid #e5e7eb;
+ border: 0.5px solid var(--ifm-color-gray-300, #e5e7eb);
.DocSearch-Button-Placeholder {
font-size: 0.875rem;
@@ -172,14 +189,10 @@
}
}
- /* Active navbar item - theme color in dark mode */
+ /* Active navbar link - theme color in dark mode */
.navbar__item--has-active-link .navbar__link,
- .navbar__item .navbar__link--active {
- color: var(--ifm-color-primary);
- }
-
- .navbar__link--active,
- .navbar__item .navbar__link--active {
+ .navbar__item .navbar__link--active,
+ .navbar__link--active {
color: var(--ifm-color-primary);
}
@@ -279,11 +292,6 @@
Mobile Sidebar Panel Styles
========================= */
.navbar-sidebar {
- /* Remove mobile icon links */
- .mobile-nav-icon-links {
- display: none;
- }
-
/* Fix spacing for navbar items in mobile sidebar */
.navbar-sidebar__item {
margin: 0;
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 3ea13fcb6a3..651aecc1aba 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -50,7 +50,7 @@ export default function NavbarWrapper(props) {
// Mobile sidebar icons removed - no longer needed
- // Mark dropdown as active when any dropdown menu item is active
+ // Consolidated MutationObserver for navbar updates
useEffect(() => {
const markActiveDropdowns = () => {
// Target elements with both navbar__item and dropdown classes
@@ -65,18 +65,6 @@ export default function NavbarWrapper(props) {
});
};
- // Check on mount and when DOM changes
- markActiveDropdowns();
- const observer = new MutationObserver(markActiveDropdowns);
- observer.observe(document.body, { childList: true, subtree: true });
-
- return () => {
- observer.disconnect();
- };
- }, []);
-
- // Mark non-dropdown navbar items as active when they contain an active link
- useEffect(() => {
const markActiveNavItems = () => {
// Target non-dropdown navbar items
const navItems = document.querySelectorAll('.navbar__item:not(.dropdown)');
@@ -90,18 +78,6 @@ export default function NavbarWrapper(props) {
});
};
- // Check on mount and when DOM changes
- markActiveNavItems();
- const observer = new MutationObserver(markActiveNavItems);
- observer.observe(document.body, { childList: true, subtree: true });
-
- return () => {
- observer.disconnect();
- };
- }, []);
-
- // Add data-text attributes to navbar links for layout shift prevention
- useEffect(() => {
const addDataTextAttributes = () => {
const navLinks = document.querySelectorAll('.navbar__link');
navLinks.forEach((link) => {
@@ -115,9 +91,16 @@ export default function NavbarWrapper(props) {
});
};
+ // Combined update function
+ const updateNavbar = () => {
+ markActiveDropdowns();
+ markActiveNavItems();
+ addDataTextAttributes();
+ };
+
// Run on mount and when DOM changes
- addDataTextAttributes();
- const observer = new MutationObserver(addDataTextAttributes);
+ updateNavbar();
+ const observer = new MutationObserver(updateNavbar);
observer.observe(document.body, { childList: true, subtree: true });
return () => {
From 064f9d61b5ef3aa18475c4d7ee3f78a60ee51178 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 7 Jan 2026 16:43:30 -0500
Subject: [PATCH 05/16] chevron next
---
docs/docusaurus.config.js | 11 +++--
docs/src/css/_navbar.scss | 88 ++++++++++++++++-----------------------
2 files changed, 45 insertions(+), 54 deletions(-)
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index d4585a10f0c..896c3b780aa 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -145,12 +145,17 @@ const config = {
},
{
to: "/reference/cli",
- label: "CLI Reference",
+ label: "CLI",
+ },
+ {
+ to: "/reference/rill-iso-extensions",
+ label: "Rill ISO 8601",
},
{
to: "/api/admin/",
- label: "API",
- }
+ label: "REST API",
+ },
+
],
},
{
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 7bdeb1bf29a..189ece6c8c2 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -6,13 +6,12 @@
.navbar .navbar__link {
color: var(--ifm-color-black);
text-decoration: none;
- font-weight: 600;
+ font-weight: 500;
- &:hover {
- color: var(--ifm-color-primary);
- text-decoration: none;
+ &:hover {
+ color: var(--ifm-color-primary);
+ }
}
-}
.navbar__item {
padding: 0.75rem 0.5rem;
@@ -44,7 +43,6 @@
.navbar__link {
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
-
}
}
@@ -55,7 +53,6 @@
> .navbar__link {
color: var(--ifm-color-black);
text-decoration: none;
- padding-right: 1.5rem; /* Extra space for chevron */
position: relative;
&:hover {
@@ -63,36 +60,6 @@
text-decoration: none;
}
- /* Hide any default Docusaurus icons/elements */
- > svg,
- > .navbar__link-icon,
- > i {
- display: none;
- }
-
- /* Replace default Docusaurus caret with Rill-style chevron */
- &::after {
- content: '';
- position: absolute;
- right: 0.5rem;
- top: 50%;
- transform: translateY(-50%);
- width: 0;
- height: 0;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 5px solid currentColor;
- transition: transform 0.2s ease;
- pointer-events: none;
- opacity: 0.7;
- }
- }
-
- /* Rotate chevron when dropdown is open or hovered */
- &--show > .navbar__link::after,
- &:hover > .navbar__link::after,
- > .navbar__link[aria-expanded="true"]::after {
- transform: translateY(-50%) rotate(180deg);
}
/* Active dropdown - theme color when any sub-page is active */
@@ -114,11 +81,26 @@
&:hover {
background-color: rgba(0, 0, 0, 0.05);
}
+
+ /* Extend hover area downward to bridge gap to dropdown menu */
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ right: 0;
+ height: 8px;
+ background: transparent;
+ pointer-events: auto;
+ z-index: 1000;
+ }
}
/* Dropdown menu - add breathing room between trigger and popover */
.navbar .dropdown__menu {
- margin-top: 2px;
+ margin-top: 8px;
}
/* Dropdown menu items - black text with hover effects */
@@ -126,7 +108,7 @@
color: var(--ifm-color-black);
text-decoration: none;
border-radius: 0.375rem;
- padding: 0.375rem 0.75rem 0.375rem 1rem;
+ padding: 0.375rem 0.75rem;
display: block;
&:hover,
@@ -213,17 +195,6 @@
color: var(--ifm-color-white);
}
- /* Rill-style chevron in dark mode */
- &::after {
- border-top-color: currentColor;
- }
- }
-
- /* Rotate chevron when dropdown is open in dark mode */
- &--show > .navbar__link::after,
- &:hover > .navbar__link::after,
- > .navbar__link[aria-expanded="true"]::after {
- transform: translateY(-50%) rotate(180deg);
}
/* Active dropdown in dark mode - theme color */
@@ -234,11 +205,26 @@
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
+
+ /* Extend hover area downward to bridge gap to dropdown menu */
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ right: 0;
+ height: 8px;
+ background: transparent;
+ pointer-events: auto;
+ z-index: 1000;
+ }
}
/* Dropdown menu in dark mode - maintain breathing room */
.dropdown__menu {
- margin-top: 4px;
+ margin-top: 8px;
}
.dropdown__link {
From afe4bb9c897def4b579ceaa16b7f85bcdcc08a43 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 7 Jan 2026 17:02:36 -0500
Subject: [PATCH 06/16] static chevron
---
docs/docusaurus.config.js | 1 +
docs/src/css/_navbar.scss | 52 +++++++++++++++++++++++++++--
docs/src/theme/Navbar/index.js | 60 ++++++++++++++++++++++++++++++++++
3 files changed, 111 insertions(+), 2 deletions(-)
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 896c3b780aa..4c8cfcd78c8 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -137,6 +137,7 @@ const config = {
label: "Reference",
position: "left",
to: "/reference/project-files",
+ className: 'my-custom-dropdown',
activeBaseRegex: "^(/reference|/api/admin)",
items: [
{
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 189ece6c8c2..5d74a13c8c1 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -2,6 +2,21 @@
Navbar Styles
========================= */
+/* Hide caret for custom dropdown links - global rule */
+.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) .menu__caret,
+.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button.menu__caret,
+.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) .clean-btn.menu__caret,
+.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) .menu__caret svg,
+.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button[class*="caret"],
+.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button[aria-label*="dropdown"],
+.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button[aria-label*="Collapse"] {
+ display: none !important;
+ visibility: hidden !important;
+ opacity: 0 !important;
+ width: 0 !important;
+ height: 0 !important;
+}
+
/* Base navbar link styles - all text black, no decorations */
.navbar .navbar__link {
color: var(--ifm-color-black);
@@ -54,18 +69,50 @@
color: var(--ifm-color-black);
text-decoration: none;
position: relative;
-
+ padding-right: 2rem;
&:hover {
color: var(--ifm-color-primary);
text-decoration: none;
}
}
+ /* Hide the default chevron icon for custom dropdown links */
+ &:has(.navbar__link.my-custom-dropdown) {
+ .menu__caret,
+ button.menu__caret,
+ .clean-btn.menu__caret,
+ button[class*="caret"],
+ button[aria-label*="dropdown"],
+ button[aria-label*="Collapse"],
+ .navbar__link.my-custom-dropdown ~ .menu__caret,
+ .navbar__link.my-custom-dropdown + .menu__caret,
+ .navbar__link.my-custom-dropdown .menu__caret,
+ .navbar__link.my-custom-dropdown::after {
+ display: none !important;
+ visibility: hidden !important;
+ opacity: 0 !important;
+ width: 0 !important;
+ height: 0 !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+ }
+ /* Rotate custom chevron on hover and when dropdown is open */
+ &:has(.navbar__link.my-custom-dropdown) {
+ .navbar__link.my-custom-dropdown .custom-chevron {
+ transition: transform 0.2s ease;
+ }
+
+ &:hover .navbar__link.my-custom-dropdown .custom-chevron,
+ &.dropdown--show .navbar__link.my-custom-dropdown .custom-chevron,
+ .navbar__link.my-custom-dropdown[aria-expanded="true"] .custom-chevron {
+ transform: translateY(0%) rotate(180deg);
+ }
+ }
/* Active dropdown - theme color when any sub-page is active */
/* JavaScript adds 'navbar__dropdown--has-active' class when dropdown menu has active item */
&.navbar__dropdown--has-active > .navbar__link {
- color: var(--ifm-color-primary);
color: var(--ifm-color-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
@@ -75,6 +122,7 @@
text-decoration-skip-ink: none;
text-decoration-skip: none;
text-decoration-skip-ink: none;
+
}
/* Hover effect for dropdown */
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 651aecc1aba..12aa65965ae 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -91,15 +91,75 @@ export default function NavbarWrapper(props) {
});
};
+ const replaceCustomDropdownCarets = () => {
+ // Add custom SVG chevron for custom dropdown links
+ // CSS already hides the default caret, so we just need to add our custom one
+ const customDropdownLinks = document.querySelectorAll('.navbar__link.my-custom-dropdown');
+ customDropdownLinks.forEach((link) => {
+ const dropdownItem = link.closest('.navbar__item.dropdown');
+ if (dropdownItem && !link.hasAttribute('data-custom-chevron-added')) {
+ // Mark as processed
+ link.setAttribute('data-custom-chevron-added', 'true');
+
+ // Create a container for the custom chevron
+ let chevronContainer = link.querySelector('.custom-chevron');
+ if (!chevronContainer) {
+ chevronContainer = document.createElement('span');
+ chevronContainer.className = 'custom-chevron';
+ chevronContainer.style.position = 'absolute';
+ chevronContainer.style.right = '0.5rem';
+ chevronContainer.style.top = '30%';
+ chevronContainer.style.transform = 'translateY(0%)';
+ chevronContainer.style.transition = 'transform 0.2s ease';
+ chevronContainer.style.opacity = '0.7';
+ chevronContainer.style.width = '14px';
+ chevronContainer.style.height = '14px';
+ chevronContainer.style.display = 'block';
+ chevronContainer.style.pointerEvents = 'none';
+ link.style.position = 'relative';
+ link.appendChild(chevronContainer);
+ }
+
+ // Clear and add custom SVG chevron
+ chevronContainer.innerHTML = '';
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ svg.setAttribute('height', '14px');
+ svg.setAttribute('viewBox', '0 0 24 24');
+ svg.setAttribute('fill', 'currentColor');
+ svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+ svg.style.width = '14px';
+ svg.style.height = '14px';
+ svg.style.display = 'block';
+
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ path.setAttribute('fill-rule', 'evenodd');
+ path.setAttribute('clip-rule', 'evenodd');
+ path.setAttribute('d', 'M19.189 9.43683C19.3842 9.63209 19.3842 9.94867 19.189 10.1439L11.9999 17.333L4.81075 10.1439C4.61549 9.94867 4.61549 9.63209 4.81075 9.43683L5.98898 8.2586C6.18424 8.06334 6.50082 8.06334 6.69609 8.2586L11.9999 13.5624L17.3036 8.2586C17.4989 8.06334 17.8155 8.06334 18.0108 8.2586L19.189 9.43683Z');
+
+ svg.appendChild(path);
+ chevronContainer.appendChild(svg);
+
+ // CSS will handle the rotation on hover/open
+ }
+ });
+ };
+
// Combined update function
const updateNavbar = () => {
markActiveDropdowns();
markActiveNavItems();
addDataTextAttributes();
+ replaceCustomDropdownCarets();
};
// Run on mount and when DOM changes
updateNavbar();
+
+ // Also run after a short delay to catch dynamically added elements
+ setTimeout(updateNavbar, 100);
+ setTimeout(updateNavbar, 500);
+ setTimeout(updateNavbar, 1000);
+
const observer = new MutationObserver(updateNavbar);
observer.observe(document.body, { childList: true, subtree: true });
From 2abe6333b56b03731f8f130907bd2a5f8f18f966 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 7 Jan 2026 17:07:07 -0500
Subject: [PATCH 07/16] mobile nav
---
docs/src/css/_navbar.scss | 35 +++++++++++++++++++++++++++++++++++
1 file changed, 35 insertions(+)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 5d74a13c8c1..3febd941e9a 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -361,6 +361,41 @@
font-size: 0.875rem;
}
}
+
+ /* Apply same styling to HTML links (GitHub, Blog) to match left-side items */
+ .navbar-icon-link {
+ display: block;
+ padding: 0.2rem 0rem;
+ margin: 0.25rem 0;
+ border-radius: 0.375rem;
+ color: var(--ifm-color-black);
+ text-decoration: none;
+ font-weight: 500;
+ font-size: 0.875rem;
+ transition: background-color 0.2s ease;
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-primary);
+ background-color: rgba(0, 0, 0, 0.05);
+ font-weight: 600;
+ }
+ }
+ }
+
+ /* Dark mode for mobile sidebar HTML links */
+ [data-theme='dark'] & {
+ .navbar-sidebar__item {
+ .navbar-icon-link {
+ color: var(--ifm-color-white);
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-primary);
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
}
/* Ensure consistent spacing between all items */
From 4a35d32e6ddddfc36c80b574f4a45c6ddf908294 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 12 Jan 2026 12:10:00 -0500
Subject: [PATCH 08/16] as req, dont see the flicker
---
docs/src/css/_navbar.scss | 113 ++++++------------
docs/src/theme/Navbar/index.js | 34 +++++-
.../theme/NavbarItem/DropdownNavbarItem.js | 65 ++++++++++
3 files changed, 135 insertions(+), 77 deletions(-)
create mode 100644 docs/src/theme/NavbarItem/DropdownNavbarItem.js
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 3febd941e9a..e06a1442d24 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -22,14 +22,18 @@
color: var(--ifm-color-black);
text-decoration: none;
font-weight: 500;
+ padding: 0.5rem 0.75rem;
+ border-radius: 0.375rem;
+ transition: background-color 0.15s ease;
- &:hover {
- color: var(--ifm-color-primary);
- }
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.03);
+ }
+
+ /* Active links don't need hover effect */
+ &.navbar__link--active:hover {
+ background-color: transparent;
}
-
-.navbar__item {
- padding: 0.75rem 0.5rem;
}
/* Active navbar link - theme color */
@@ -37,44 +41,21 @@
.navbar__item .navbar__link--active {
color: var(--ifm-color-primary);
text-decoration: underline;
- text-decoration-thickness: 1px;
+ text-decoration-thickness: 2px;
text-underline-offset: 14px;
text-decoration-color: var(--ifm-color-primary);
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-skip: none;
- text-decoration-skip-ink: none;
-}
-
-/* Hover effects with rounded corners for navbar items */
-.navbar .navbar__item {
- border-radius: 0.375rem;
-
- &:hover {
- background-color: rgba(0, 0, 0, 0.05);
- }
-
- /* Standardized padding for consistent widths */
- .navbar__link {
- padding: 0.5rem 0.75rem;
- border-radius: 0.375rem;
- }
}
/* Dropdown items - black text, no decorations */
/* Target elements with both navbar__item and dropdown classes */
.navbar .navbar__item.dropdown {
- /* Base styles for dropdown link */
+ /* Dropdown link - inherits base .navbar__link styles, only adds extra right padding for chevron */
> .navbar__link {
- color: var(--ifm-color-black);
- text-decoration: none;
position: relative;
padding-right: 2rem;
- &:hover {
- color: var(--ifm-color-primary);
- text-decoration: none;
- }
-
}
/* Hide the default chevron icon for custom dropdown links */
&:has(.navbar__link.my-custom-dropdown) {
@@ -115,19 +96,12 @@
&.navbar__dropdown--has-active > .navbar__link {
color: var(--ifm-color-primary);
text-decoration: underline;
- text-decoration-thickness: 1px;
+ text-decoration-thickness: 2px;
text-underline-offset: 14px;
text-decoration-color: var(--ifm-color-primary);
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-skip: none;
- text-decoration-skip-ink: none;
-
- }
-
- /* Hover effect for dropdown */
- &:hover {
- background-color: rgba(0, 0, 0, 0.05);
}
/* Extend hover area downward to bridge gap to dropdown menu */
@@ -151,6 +125,24 @@
margin-top: 8px;
}
+/* Temporarily disable dropdown hover when closing - prevents re-opening from hover bridge */
+.navbar.navbar--closing-dropdown {
+ .navbar__item.dropdown {
+ /* Disable the hover bridge */
+ &::before {
+ pointer-events: none !important;
+ }
+
+ /* Hide dropdown menu regardless of hover state */
+ .dropdown__menu {
+ display: none !important;
+ opacity: 0 !important;
+ visibility: hidden !important;
+ pointer-events: none !important;
+ }
+ }
+}
+
/* Dropdown menu items - black text with hover effects */
.navbar .dropdown__link {
color: var(--ifm-color-black);
@@ -216,6 +208,12 @@
&:hover,
&:focus {
color: var(--ifm-color-white);
+ background-color: rgba(255, 255, 255, 0.06);
+ }
+
+ /* Active links don't need hover effect */
+ &.navbar__link--active:hover {
+ background-color: transparent;
}
}
@@ -226,48 +224,11 @@
color: var(--ifm-color-primary);
}
- /* Hover effects for navbar items in dark mode */
- .navbar__item {
- &:hover {
- background-color: rgba(255, 255, 255, 0.1);
- }
- }
-
.navbar__item.dropdown {
- /* Base styles for dropdown link in dark mode */
- > .navbar__link {
- color: var(--ifm-color-white);
-
- &:hover,
- &:focus {
- color: var(--ifm-color-white);
- }
-
- }
-
/* Active dropdown in dark mode - theme color */
&.navbar__dropdown--has-active > .navbar__link {
color: var(--ifm-color-primary);
}
-
- &:hover {
- background-color: rgba(255, 255, 255, 0.1);
- }
-
- /* Extend hover area downward to bridge gap to dropdown menu */
- position: relative;
-
- &::before {
- content: '';
- position: absolute;
- bottom: -8px;
- left: 0;
- right: 0;
- height: 8px;
- background: transparent;
- pointer-events: auto;
- z-index: 1000;
- }
}
/* Dropdown menu in dark mode - maintain breathing room */
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 12aa65965ae..986486c3675 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -1,4 +1,5 @@
import { useColorMode } from '@docusaurus/theme-common';
+import { useLocation } from '@docusaurus/router';
import Navbar from '@theme-original/Navbar';
import { useEffect, useLayoutEffect } from 'react';
@@ -8,6 +9,33 @@ export default function NavbarWrapper(props) {
// We only need colorMode to determine which icon to show.
// The toggle logic is handled by the original button's onClick.
const { colorMode } = useColorMode();
+ const location = useLocation();
+
+ // Close all open dropdowns when route changes
+ // This fixes the issue where hover-based dropdowns stay open after clicking an item
+ useEffect(() => {
+ const closeAllDropdowns = () => {
+ // Remove dropdown--show class from all dropdowns
+ const openDropdowns = document.querySelectorAll('.navbar__item.dropdown.dropdown--show');
+ openDropdowns.forEach((dropdown) => {
+ dropdown.classList.remove('dropdown--show');
+ });
+
+ // Also reset aria-expanded attributes
+ const expandedLinks = document.querySelectorAll('.navbar__link[aria-expanded="true"]');
+ expandedLinks.forEach((link) => {
+ link.setAttribute('aria-expanded', 'false');
+ });
+
+ // Blur any focused navbar elements to prevent hover state from re-triggering
+ const activeElement = document.activeElement;
+ if (activeElement && activeElement.closest('.navbar__item.dropdown')) {
+ activeElement.blur();
+ }
+ };
+
+ closeAllDropdowns();
+ }, [location.pathname]);
// Handle Dark Mode Toggle Icons
// useLayoutEffect fires synchronously before paint, reducing flicker
@@ -155,7 +183,11 @@ export default function NavbarWrapper(props) {
// Run on mount and when DOM changes
updateNavbar();
- // Also run after a short delay to catch dynamically added elements
+ // Staggered timeouts to handle dynamically rendered navbar elements.
+ // Docusaurus may hydrate or lazy-load navbar items at different times,
+ // especially for dropdowns and client-side navigation. These delays
+ // ensure our custom styling (data-text attrs, active states, chevrons)
+ // is applied even if elements render after initial mount.
setTimeout(updateNavbar, 100);
setTimeout(updateNavbar, 500);
setTimeout(updateNavbar, 1000);
diff --git a/docs/src/theme/NavbarItem/DropdownNavbarItem.js b/docs/src/theme/NavbarItem/DropdownNavbarItem.js
new file mode 100644
index 00000000000..da1a5c3536e
--- /dev/null
+++ b/docs/src/theme/NavbarItem/DropdownNavbarItem.js
@@ -0,0 +1,65 @@
+import React, { useEffect, useCallback } from 'react';
+import DropdownNavbarItem from '@theme-original/NavbarItem/DropdownNavbarItem';
+import { useLocation } from '@docusaurus/router';
+
+/**
+ * Swizzled DropdownNavbarItem component that closes dropdown on item click.
+ *
+ * This fixes the issue where hover-based dropdowns stay open after clicking
+ * a menu item because the ::before pseudo-element (hover bridge) keeps the
+ * dropdown open if the mouse is still in that area.
+ */
+export default function DropdownNavbarItemWrapper(props) {
+ const location = useLocation();
+
+ // Helper to close all dropdowns and temporarily disable hover
+ const closeAllDropdowns = useCallback(() => {
+ // Add a class to the navbar to temporarily disable hover
+ const navbar = document.querySelector('.navbar');
+ if (navbar) {
+ navbar.classList.add('navbar--closing-dropdown');
+ }
+
+ // Remove dropdown--show class from all dropdowns
+ const openDropdowns = document.querySelectorAll('.navbar__item.dropdown.dropdown--show');
+ openDropdowns.forEach((dropdown) => {
+ dropdown.classList.remove('dropdown--show');
+ });
+
+ // Reset aria-expanded attributes and blur
+ const expandedLinks = document.querySelectorAll('.navbar__link[aria-expanded="true"]');
+ expandedLinks.forEach((link) => {
+ link.setAttribute('aria-expanded', 'false');
+ link.blur();
+ });
+
+ // Remove the closing class after mouse has likely moved away
+ setTimeout(() => {
+ if (navbar) {
+ navbar.classList.remove('navbar--closing-dropdown');
+ }
+ }, 300);
+ }, []);
+
+ // Close dropdown when route changes
+ useEffect(() => {
+ closeAllDropdowns();
+ }, [location.pathname, closeAllDropdowns]);
+
+ // Global click handler for dropdown links
+ useEffect(() => {
+ const handleClick = (e) => {
+ const dropdownLink = e.target.closest('.dropdown__link');
+ if (dropdownLink) {
+ // Immediately close
+ closeAllDropdowns();
+ }
+ };
+
+ // Use capture phase to catch events before they bubble
+ document.addEventListener('click', handleClick, true);
+ return () => document.removeEventListener('click', handleClick, true);
+ }, [closeAllDropdowns]);
+
+ return ;
+}
From 0da2b75d52aaa1782169f7d5f744de9b676f4ad8 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 20 Jan 2026 10:56:00 -0500
Subject: [PATCH 09/16] css fix
---
docs/src/css/_navbar.scss | 97 +++++++++++++++++++++++++++++++++------
1 file changed, 84 insertions(+), 13 deletions(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index e06a1442d24..54d74f5f7b7 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -51,11 +51,41 @@
/* Dropdown items - black text, no decorations */
/* Target elements with both navbar__item and dropdown classes */
+/*
+ * PADDING CONSOLIDATION: All padding is consolidated on .navbar__link to match spacing
+ * of other navbar items. The .navbar__item.dropdown container has zero padding to prevent
+ * double padding that creates larger gaps between left-side items.
+ *
+ * Structure: div.navbar__item.dropdown (padding: 0) > a.navbar__link (all padding here)
+ * For custom dropdowns, the chevron is inside the link, so padding-right accounts for it.
+ */
.navbar .navbar__item.dropdown {
- /* Dropdown link - inherits base .navbar__link styles, only adds extra right padding for chevron */
+ /* Remove ALL default padding/margin from dropdown container to prevent double padding */
+ padding: 0 !important;
+ margin: 0 !important;
+
+ /* Also remove padding from any default Docusaurus styles that might apply */
+ &,
+ &.navbar__item {
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ /* Consolidate ALL padding on the link element only - matches other navbar items */
> .navbar__link {
position: relative;
- padding-right: 2rem;
+ /* All padding consolidated here - same as base .navbar__link (0.5rem 0.75rem) */
+ padding: 0.5rem 0.75rem !important;
+ padding-right: 2rem !important; /* Extra right padding for chevron/caret space */
+ margin: 0 !important;
+ }
+
+ /* Ensure the default caret button (if present as sibling) has no padding/margin */
+ /* Note: For custom dropdowns, this is hidden. For default dropdowns, Docusaurus handles positioning. */
+ > .menu__caret,
+ > button.menu__caret {
+ padding: 0 !important;
+ margin: 0 !important;
}
/* Hide the default chevron icon for custom dropdown links */
&:has(.navbar__link.my-custom-dropdown) {
@@ -120,12 +150,14 @@
}
}
-/* Dropdown menu - add breathing room between trigger and popover */
+/* Dropdown menu - add breathing room between trigger and popover, align closer to text */
.navbar .dropdown__menu {
margin-top: 8px;
+ margin-left: -0.5rem; /* Align dropdown menu closer to the text (offset container padding) */
}
/* Temporarily disable dropdown hover when closing - prevents re-opening from hover bridge */
+/* This class is used by DropdownNavbarItem.js to close dropdowns on route change */
.navbar.navbar--closing-dropdown {
.navbar__item.dropdown {
/* Disable the hover bridge */
@@ -158,34 +190,58 @@
background-color: rgba(0, 0, 0, 0.05);
}
- /* Active dropdown menu items - theme color */
+ /* Active dropdown menu items - theme color and bolder */
&.dropdown__link--active {
color: var(--ifm-color-primary);
text-decoration: none;
-
+ font-weight: 600; /* Make active dropdown menu item bolder */
}
}
-/* Custom HTML links (GitHub, Blog) */
+/* Custom HTML links (GitHub, Blog) - ensure consistent spacing with other navbar items */
.navbar .navbar-icon-link {
color: var(--ifm-color-black);
text-decoration: none;
+ // padding: 0.5rem 0.75rem; /* Match base navbar link padding for consistent spacing */
+ border-radius: 0.375rem;
+ transition: background-color 0.15s ease;
&:hover,
&:focus {
color: var(--ifm-color-black);
text-decoration: none;
+ background-color: rgba(0, 0, 0, 0.03); /* Match navbar link hover effect */
}
}
/* DocSearch button - smaller text */
.navbar .DocSearch-Button {
font-size: 0.875rem; /* 14px */
- min-width: 16rem; /* Increased width */
+ min-width: 16rem; /* Increased width for desktop */
border: 0.5px solid var(--ifm-color-gray-300, #e5e7eb);
.DocSearch-Button-Placeholder {
font-size: 0.875rem;
}
+
+ /* Reduce size on mobile */
+ @media (max-width: 996px) {
+ min-width: 12rem; /* Smaller width on mobile */
+ font-size: 0.8125rem; /* Slightly smaller text */
+
+ .DocSearch-Button-Placeholder {
+ font-size: 0.8125rem;
+ }
+ }
+
+ /* Even smaller on very small screens */
+ @media (max-width: 576px) {
+ min-width: 10rem; /* Even smaller width on very small screens */
+ font-size: 0.75rem; /* Smaller text */
+
+ .DocSearch-Button-Placeholder {
+ font-size: 0.75rem;
+ }
+ }
}
/* Right-hand navbar items - only for smaller widths */
@@ -231,9 +287,10 @@
}
}
- /* Dropdown menu in dark mode - maintain breathing room */
+ /* Dropdown menu in dark mode - maintain breathing room and alignment */
.dropdown__menu {
margin-top: 8px;
+ margin-left: -0.5rem; /* Align dropdown menu closer to the text */
}
.dropdown__link {
@@ -245,9 +302,10 @@
background-color: rgba(255, 255, 255, 0.1);
}
- /* Active dropdown menu items - theme color */
+ /* Active dropdown menu items - theme color and bolder */
&.dropdown__link--active {
color: var(--ifm-color-primary);
+ font-weight: 600; /* Make active dropdown menu item bolder */
}
}
@@ -257,6 +315,7 @@
&:hover,
&:focus {
color: var(--ifm-color-white);
+ background-color: rgba(255, 255, 255, 0.06); /* Match navbar link hover effect in dark mode */
}
}
@@ -309,17 +368,29 @@
/* Right-hand items in mobile sidebar - match left-hand styling */
.navbar-sidebar__item {
- /* Apply same styling to search button */
+ /* Apply same styling to search button - smaller on mobile */
.DocSearch-Button {
- padding: 0.75rem 1rem;
+ padding: 0.5rem 0.75rem; /* Reduced padding for mobile */
margin: 0.25rem 0;
border-radius: 0.375rem;
width: 100%;
+ max-width: 100%; /* Ensure it doesn't overflow */
justify-content: flex-start;
- font-size: 0.875rem; /* 14px */
+ font-size: 0.8125rem; /* Slightly smaller text on mobile */
+ min-width: auto; /* Remove min-width constraint on mobile */
.DocSearch-Button-Placeholder {
- font-size: 0.875rem;
+ font-size: 0.8125rem;
+ }
+
+ /* Even smaller on very small screens */
+ @media (max-width: 576px) {
+ padding: 0.375rem 0.5rem; /* Further reduced padding */
+ font-size: 0.75rem; /* Smaller text */
+
+ .DocSearch-Button-Placeholder {
+ font-size: 0.75rem;
+ }
}
}
From 53e237e9263fd877980a111f27af6b6236bdfa80 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 20 Jan 2026 16:09:42 -0500
Subject: [PATCH 10/16] remove commented css
---
docs/src/css/_navbar.scss | 1 -
1 file changed, 1 deletion(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 54d74f5f7b7..36e55e7513f 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -201,7 +201,6 @@
.navbar .navbar-icon-link {
color: var(--ifm-color-black);
text-decoration: none;
- // padding: 0.5rem 0.75rem; /* Match base navbar link padding for consistent spacing */
border-radius: 0.375rem;
transition: background-color 0.15s ease;
From 559e851adda1dac6eaf8a4fafaa65ff51ff96ec4 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 21 Jan 2026 10:00:10 -0500
Subject: [PATCH 11/16] as req
---
docs/src/css/_navbar.scss | 19 +++++++++++++------
1 file changed, 13 insertions(+), 6 deletions(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 36e55e7513f..822e714ce9a 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -150,10 +150,10 @@
}
}
-/* Dropdown menu - add breathing room between trigger and popover, align closer to text */
+/* Dropdown menu - add breathing room between trigger and popover, left-align with button */
.navbar .dropdown__menu {
margin-top: 8px;
- margin-left: -0.5rem; /* Align dropdown menu closer to the text (offset container padding) */
+ margin-left: 0; /* Left-align dropdown with button */
}
/* Temporarily disable dropdown hover when closing - prevents re-opening from hover bridge */
@@ -197,18 +197,25 @@
font-weight: 600; /* Make active dropdown menu item bolder */
}
}
-/* Custom HTML links (GitHub, Blog) - ensure consistent spacing with other navbar items */
+/* Custom HTML links (GitHub, Blog) - match .navbar__link styling */
+/* Remove padding from parent container, consolidate on link */
+.navbar .navbar__item:has(.navbar-icon-link) {
+ padding: 0;
+}
+
.navbar .navbar-icon-link {
color: var(--ifm-color-black);
text-decoration: none;
+ font-weight: 500;
+ padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
transition: background-color 0.15s ease;
-
+
&:hover,
&:focus {
color: var(--ifm-color-black);
text-decoration: none;
- background-color: rgba(0, 0, 0, 0.03); /* Match navbar link hover effect */
+ background-color: rgba(0, 0, 0, 0.03);
}
}
@@ -289,7 +296,7 @@
/* Dropdown menu in dark mode - maintain breathing room and alignment */
.dropdown__menu {
margin-top: 8px;
- margin-left: -0.5rem; /* Align dropdown menu closer to the text */
+ margin-left: 0; /* Left-align dropdown with button */
}
.dropdown__link {
From ba9274ef3ba20756aa2bf73a3a865132e192442d Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 21 Jan 2026 10:10:50 -0500
Subject: [PATCH 12/16] fix mobile hover
---
docs/src/css/_navbar.scss | 46 ++++++++++++++++++++++++++++-----------
1 file changed, 33 insertions(+), 13 deletions(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 822e714ce9a..62209d3f8bd 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -252,12 +252,17 @@
/* Right-hand navbar items - only for smaller widths */
@media (max-width: 996px) {
+ .navbar .navbar__item:has(.navbar-icon-link) {
+ padding: 0;
+ }
+
.navbar .navbar-icon-link {
- padding: 0.25rem 0rem;
-
+ padding: 0.5rem 0.75rem;
+
&:hover,
&:focus {
- color: var(--ifm-color-primary);
+ color: var(--ifm-color-black);
+ background-color: rgba(0, 0, 0, 0.03);
}
}
}
@@ -335,7 +340,7 @@
.navbar-icon-link {
&:hover,
&:focus {
- background-color: rgba(255, 255, 255, 0.1);
+ background-color: none;
}
}
@@ -400,23 +405,38 @@
}
}
- /* Apply same styling to HTML links (GitHub, Blog) to match left-side items */
+ /* Apply same styling to HTML links (GitHub, Blog) - match .menu__link */
+ /* Remove hover from all possible parent containers */
+ &:has(.navbar-icon-link),
+ .menu__list-item:has(.navbar-icon-link) {
+ background: none !important;
+
+ &:hover {
+ background: none !important;
+ }
+ }
+
+ .menu__list-item:has(.navbar-icon-link) .menu__link {
+ background: none !important;
+
+ &:hover {
+ background: none !important;
+ }
+ }
+
.navbar-icon-link {
display: block;
- padding: 0.2rem 0rem;
- margin: 0.25rem 0;
- border-radius: 0.375rem;
+ padding: 0.25rem 0.5rem 0.25rem 0;
color: var(--ifm-color-black);
text-decoration: none;
font-weight: 500;
- font-size: 0.875rem;
- transition: background-color 0.2s ease;
-
+ font-size: var(--default-font);
+
&:hover,
&:focus {
color: var(--ifm-color-primary);
- background-color: rgba(0, 0, 0, 0.05);
font-weight: 600;
+ background: none !important;
}
}
}
@@ -430,7 +450,7 @@
&:hover,
&:focus {
color: var(--ifm-color-primary);
- background-color: rgba(255, 255, 255, 0.1);
+ font-weight: 600;
}
}
}
From 5938373f55bf0797f543d33a8ceba7c69fd2b5f4 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 23 Jan 2026 09:25:20 -0500
Subject: [PATCH 13/16] feedback
---
docs/src/css/_navbar.scss | 477 ++++++++++++++++-----------------
docs/src/theme/Navbar/index.js | 51 ++--
2 files changed, 259 insertions(+), 269 deletions(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 62209d3f8bd..97b04e1e62a 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -1,23 +1,18 @@
/* =========================
Navbar Styles
- ========================= */
-/* Hide caret for custom dropdown links - global rule */
-.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) .menu__caret,
-.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button.menu__caret,
-.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) .clean-btn.menu__caret,
-.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) .menu__caret svg,
-.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button[class*="caret"],
-.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button[aria-label*="dropdown"],
-.navbar .navbar__item.dropdown:has(.navbar__link.my-custom-dropdown) button[aria-label*="Collapse"] {
- display: none !important;
- visibility: hidden !important;
- opacity: 0 !important;
- width: 0 !important;
- height: 0 !important;
-}
+ Class hooks added by Navbar/index.js:
+ - .dropdown--custom: Dropdown with custom chevron (has .my-custom-dropdown link)
+ - .navbar__item--has-icon-link: Navbar item containing .navbar-icon-link
+ - .navbar__dropdown--has-active: Dropdown with active menu item
+ - .navbar__item--has-active-link: Non-dropdown item with active link
+ - .menu__list-item--has-icon-link: Mobile menu item with icon link
+ - .navbar-sidebar__item--has-icon-link: Sidebar item with icon link
+ ========================= */
-/* Base navbar link styles - all text black, no decorations */
+/* =========================
+ Base Navbar Link Styles
+ ========================= */
.navbar .navbar__link {
color: var(--ifm-color-black);
text-decoration: none;
@@ -25,18 +20,17 @@
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
transition: background-color 0.15s ease;
-
+
&:hover {
background-color: rgba(0, 0, 0, 0.03);
}
-
- /* Active links don't need hover effect */
+
&.navbar__link--active:hover {
background-color: transparent;
}
}
-/* Active navbar link - theme color */
+/* Active navbar link styling */
.navbar .navbar__link--active,
.navbar__item .navbar__link--active {
color: var(--ifm-color-primary);
@@ -49,94 +43,38 @@
text-decoration-skip: none;
}
-/* Dropdown items - black text, no decorations */
-/* Target elements with both navbar__item and dropdown classes */
-/*
- * PADDING CONSOLIDATION: All padding is consolidated on .navbar__link to match spacing
- * of other navbar items. The .navbar__item.dropdown container has zero padding to prevent
- * double padding that creates larger gaps between left-side items.
- *
- * Structure: div.navbar__item.dropdown (padding: 0) > a.navbar__link (all padding here)
- * For custom dropdowns, the chevron is inside the link, so padding-right accounts for it.
- */
+/* =========================
+ Hide Default Caret for Custom Dropdowns
+ The caret is added via ::after pseudo-element by Infima CSS on .dropdown > .navbar__link
+ ========================= */
+.navbar .dropdown > .navbar__link.my-custom-dropdown::after {
+ content: none !important;
+}
+
+/* =========================
+ Dropdown Container Styles
+ ========================= */
.navbar .navbar__item.dropdown {
- /* Remove ALL default padding/margin from dropdown container to prevent double padding */
- padding: 0 !important;
- margin: 0 !important;
-
- /* Also remove padding from any default Docusaurus styles that might apply */
- &,
- &.navbar__item {
- padding: 0 !important;
- margin: 0 !important;
- }
-
- /* Consolidate ALL padding on the link element only - matches other navbar items */
+ padding: 0;
+ margin: 0;
+ position: relative;
+
+ /* Consolidate padding on the link element */
> .navbar__link {
position: relative;
- /* All padding consolidated here - same as base .navbar__link (0.5rem 0.75rem) */
- padding: 0.5rem 0.75rem !important;
- padding-right: 2rem !important; /* Extra right padding for chevron/caret space */
- margin: 0 !important;
- }
-
- /* Ensure the default caret button (if present as sibling) has no padding/margin */
- /* Note: For custom dropdowns, this is hidden. For default dropdowns, Docusaurus handles positioning. */
+ padding: 0.5rem 0.75rem;
+ padding-right: 2rem; /* Space for chevron */
+ margin: 0;
+ }
+
+ /* Ensure caret buttons have no extra spacing */
> .menu__caret,
> button.menu__caret {
- padding: 0 !important;
- margin: 0 !important;
- }
- /* Hide the default chevron icon for custom dropdown links */
- &:has(.navbar__link.my-custom-dropdown) {
- .menu__caret,
- button.menu__caret,
- .clean-btn.menu__caret,
- button[class*="caret"],
- button[aria-label*="dropdown"],
- button[aria-label*="Collapse"],
- .navbar__link.my-custom-dropdown ~ .menu__caret,
- .navbar__link.my-custom-dropdown + .menu__caret,
- .navbar__link.my-custom-dropdown .menu__caret,
- .navbar__link.my-custom-dropdown::after {
- display: none !important;
- visibility: hidden !important;
- opacity: 0 !important;
- width: 0 !important;
- height: 0 !important;
- padding: 0 !important;
- margin: 0 !important;
- }
- }
-
- /* Rotate custom chevron on hover and when dropdown is open */
- &:has(.navbar__link.my-custom-dropdown) {
- .navbar__link.my-custom-dropdown .custom-chevron {
- transition: transform 0.2s ease;
- }
-
- &:hover .navbar__link.my-custom-dropdown .custom-chevron,
- &.dropdown--show .navbar__link.my-custom-dropdown .custom-chevron,
- .navbar__link.my-custom-dropdown[aria-expanded="true"] .custom-chevron {
- transform: translateY(0%) rotate(180deg);
- }
- }
- /* Active dropdown - theme color when any sub-page is active */
- /* JavaScript adds 'navbar__dropdown--has-active' class when dropdown menu has active item */
- &.navbar__dropdown--has-active > .navbar__link {
- color: var(--ifm-color-primary);
- text-decoration: underline;
- text-decoration-thickness: 2px;
- text-underline-offset: 14px;
- text-decoration-color: var(--ifm-color-primary);
- text-decoration-style: solid;
- text-decoration-skip-ink: none;
- text-decoration-skip: none;
+ padding: 0;
+ margin: 0;
}
-
- /* Extend hover area downward to bridge gap to dropdown menu */
- position: relative;
-
+
+ /* Hover bridge - extends hover area to dropdown menu */
&::before {
content: '';
position: absolute;
@@ -148,58 +86,110 @@
pointer-events: auto;
z-index: 1000;
}
-}
-/* Dropdown menu - add breathing room between trigger and popover, left-align with button */
-.navbar .dropdown__menu {
- margin-top: 8px;
- margin-left: 0; /* Left-align dropdown with button */
+ /* Active dropdown styling */
+ &.navbar__dropdown--has-active > .navbar__link {
+ color: var(--ifm-color-primary);
+ text-decoration: underline;
+ text-decoration-thickness: 2px;
+ text-underline-offset: 14px;
+ text-decoration-color: var(--ifm-color-primary);
+ text-decoration-style: solid;
+ text-decoration-skip-ink: none;
+ text-decoration-skip: none;
+ }
}
-/* Temporarily disable dropdown hover when closing - prevents re-opening from hover bridge */
-/* This class is used by DropdownNavbarItem.js to close dropdowns on route change */
-.navbar.navbar--closing-dropdown {
- .navbar__item.dropdown {
- /* Disable the hover bridge */
- &::before {
- pointer-events: none !important;
- }
-
- /* Hide dropdown menu regardless of hover state */
- .dropdown__menu {
- display: none !important;
- opacity: 0 !important;
- visibility: hidden !important;
- pointer-events: none !important;
+/* =========================
+ Custom Dropdown Styles (dropdown--custom)
+ ========================= */
+.navbar .navbar__item.dropdown.dropdown--custom {
+ /* Custom chevron positioning and animation */
+ .navbar__link.my-custom-dropdown {
+ position: relative;
+
+ .custom-chevron {
+ position: absolute;
+ right: 0.5rem;
+ top: 30%;
+ transform: translateY(0%);
+ transition: transform 0.2s ease;
+ opacity: 0.7;
+ width: 14px;
+ height: 14px;
+ display: block;
+ pointer-events: none;
+
+ svg {
+ width: 14px;
+ height: 14px;
+ display: block;
+ }
}
}
+
+ /* Rotate chevron on hover/open */
+ &:hover .navbar__link.my-custom-dropdown .custom-chevron,
+ &.dropdown--show .navbar__link.my-custom-dropdown .custom-chevron {
+ transform: translateY(0%) rotate(180deg);
+ }
+
+ .navbar__link.my-custom-dropdown[aria-expanded="true"] .custom-chevron {
+ transform: translateY(0%) rotate(180deg);
+ }
+}
+
+/* =========================
+ Dropdown Menu Styles
+ ========================= */
+.navbar .dropdown__menu {
+ margin-top: 8px;
+ margin-left: 0;
}
-/* Dropdown menu items - black text with hover effects */
.navbar .dropdown__link {
color: var(--ifm-color-black);
text-decoration: none;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
display: block;
-
+
&:hover,
&:focus {
color: var(--ifm-color-black);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.05);
}
-
- /* Active dropdown menu items - theme color and bolder */
+
&.dropdown__link--active {
color: var(--ifm-color-primary);
text-decoration: none;
- font-weight: 600; /* Make active dropdown menu item bolder */
+ font-weight: 600;
}
}
-/* Custom HTML links (GitHub, Blog) - match .navbar__link styling */
-/* Remove padding from parent container, consolidate on link */
-.navbar .navbar__item:has(.navbar-icon-link) {
+
+/* =========================
+ Dropdown Closing State
+ Used by DropdownNavbarItem.js on route change
+ ========================= */
+.navbar.navbar--closing-dropdown .navbar__item.dropdown {
+ &::before {
+ pointer-events: none;
+ }
+
+ .dropdown__menu {
+ display: none;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ }
+}
+
+/* =========================
+ Icon Link Styles (navbar__item--has-icon-link)
+ Replaces :has(.navbar-icon-link) selectors
+ ========================= */
+.navbar .navbar__item.navbar__item--has-icon-link {
padding: 0;
}
@@ -219,40 +209,42 @@
}
}
-/* DocSearch button - smaller text */
+/* =========================
+ DocSearch Button Styles
+ ========================= */
.navbar .DocSearch-Button {
- font-size: 0.875rem; /* 14px */
- min-width: 16rem; /* Increased width for desktop */
+ font-size: 0.875rem;
+ min-width: 16rem;
border: 0.5px solid var(--ifm-color-gray-300, #e5e7eb);
-
+
.DocSearch-Button-Placeholder {
font-size: 0.875rem;
}
-
- /* Reduce size on mobile */
+
@media (max-width: 996px) {
- min-width: 12rem; /* Smaller width on mobile */
- font-size: 0.8125rem; /* Slightly smaller text */
-
+ min-width: 12rem;
+ font-size: 0.8125rem;
+
.DocSearch-Button-Placeholder {
font-size: 0.8125rem;
}
}
-
- /* Even smaller on very small screens */
+
@media (max-width: 576px) {
- min-width: 10rem; /* Even smaller width on very small screens */
- font-size: 0.75rem; /* Smaller text */
-
+ min-width: 10rem;
+ font-size: 0.75rem;
+
.DocSearch-Button-Placeholder {
font-size: 0.75rem;
}
}
}
-/* Right-hand navbar items - only for smaller widths */
+/* =========================
+ Mobile/Tablet Breakpoint Styles
+ ========================= */
@media (max-width: 996px) {
- .navbar .navbar__item:has(.navbar-icon-link) {
+ .navbar .navbar__item.navbar__item--has-icon-link {
padding: 0;
}
@@ -267,88 +259,78 @@
}
}
-/* Dark mode adjustments */
+/* =========================
+ Dark Mode Styles
+ ========================= */
[data-theme='dark'] .navbar {
.navbar__link {
color: var(--ifm-color-white);
-
+
&:hover,
&:focus {
color: var(--ifm-color-white);
background-color: rgba(255, 255, 255, 0.06);
}
-
- /* Active links don't need hover effect */
+
&.navbar__link--active:hover {
background-color: transparent;
}
}
-
- /* Active navbar link - theme color in dark mode */
+
.navbar__item--has-active-link .navbar__link,
.navbar__item .navbar__link--active,
.navbar__link--active {
color: var(--ifm-color-primary);
}
-
- .navbar__item.dropdown {
- /* Active dropdown in dark mode - theme color */
- &.navbar__dropdown--has-active > .navbar__link {
- color: var(--ifm-color-primary);
- }
+
+ .navbar__item.dropdown.navbar__dropdown--has-active > .navbar__link {
+ color: var(--ifm-color-primary);
}
-
- /* Dropdown menu in dark mode - maintain breathing room and alignment */
+
.dropdown__menu {
margin-top: 8px;
- margin-left: 0; /* Left-align dropdown with button */
+ margin-left: 0;
}
-
+
.dropdown__link {
color: var(--ifm-color-white);
-
+
&:hover,
&:focus {
color: var(--ifm-color-white);
background-color: rgba(255, 255, 255, 0.1);
}
-
- /* Active dropdown menu items - theme color and bolder */
+
&.dropdown__link--active {
color: var(--ifm-color-primary);
- font-weight: 600; /* Make active dropdown menu item bolder */
+ font-weight: 600;
}
}
-
+
.navbar-icon-link {
color: var(--ifm-color-white);
-
+
&:hover,
&:focus {
color: var(--ifm-color-white);
- background-color: rgba(255, 255, 255, 0.06); /* Match navbar link hover effect in dark mode */
+ background-color: rgba(255, 255, 255, 0.06);
}
}
-
- /* DocSearch button in dark mode */
+
.DocSearch-Button {
border: 0.5px solid rgba(255, 255, 255, 0.2);
}
-
- /* Right-hand navbar items in dark mode - only for smaller widths */
+
@media (max-width: 996px) {
.navbar-icon-link {
&:hover,
&:focus {
- background-color: none;
+ background-color: transparent;
}
}
-
- /* Search button styling in dark mode */
- .navbar__item .DocSearch-Button {
- &:hover {
- background-color: rgba(255, 255, 255, 0.1);
- }
+
+ .navbar__item .DocSearch-Button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
}
}
}
@@ -357,111 +339,102 @@
Mobile Sidebar Panel Styles
========================= */
.navbar-sidebar {
- /* Fix spacing for navbar items in mobile sidebar */
.navbar-sidebar__item {
margin: 0;
padding: 0;
}
-
- /* Fix spacing for dropdown items in mobile sidebar */
+
.navbar-sidebar__item.dropdown {
.dropdown__menu {
padding: 0.5rem 0;
margin: 0;
}
-
+
.dropdown__link {
padding: 0.625rem 1.5rem 0.625rem 1.75rem;
margin: 0.125rem 0;
border-radius: 0.375rem;
}
}
-
- /* Right-hand items in mobile sidebar - match left-hand styling */
- .navbar-sidebar__item {
- /* Apply same styling to search button - smaller on mobile */
- .DocSearch-Button {
- padding: 0.5rem 0.75rem; /* Reduced padding for mobile */
- margin: 0.25rem 0;
- border-radius: 0.375rem;
- width: 100%;
- max-width: 100%; /* Ensure it doesn't overflow */
- justify-content: flex-start;
- font-size: 0.8125rem; /* Slightly smaller text on mobile */
- min-width: auto; /* Remove min-width constraint on mobile */
-
- .DocSearch-Button-Placeholder {
- font-size: 0.8125rem;
- }
-
- /* Even smaller on very small screens */
- @media (max-width: 576px) {
- padding: 0.375rem 0.5rem; /* Further reduced padding */
- font-size: 0.75rem; /* Smaller text */
-
- .DocSearch-Button-Placeholder {
- font-size: 0.75rem;
- }
- }
+
+ /* DocSearch button in sidebar */
+ .navbar-sidebar__item .DocSearch-Button {
+ padding: 0.5rem 0.75rem;
+ margin: 0.25rem 0;
+ border-radius: 0.375rem;
+ width: 100%;
+ max-width: 100%;
+ justify-content: flex-start;
+ font-size: 0.8125rem;
+ min-width: auto;
+
+ .DocSearch-Button-Placeholder {
+ font-size: 0.8125rem;
}
-
- /* Apply same styling to HTML links (GitHub, Blog) - match .menu__link */
- /* Remove hover from all possible parent containers */
- &:has(.navbar-icon-link),
- .menu__list-item:has(.navbar-icon-link) {
- background: none !important;
- &:hover {
- background: none !important;
+ @media (max-width: 576px) {
+ padding: 0.375rem 0.5rem;
+ font-size: 0.75rem;
+
+ .DocSearch-Button-Placeholder {
+ font-size: 0.75rem;
}
}
+ }
- .menu__list-item:has(.navbar-icon-link) .menu__link {
- background: none !important;
+ /* Icon links in sidebar - using class hooks */
+ .navbar-sidebar__item--has-icon-link,
+ .menu__list-item--has-icon-link {
+ background: none;
- &:hover {
- background: none !important;
- }
+ &:hover {
+ background: none;
}
- .navbar-icon-link {
- display: block;
- padding: 0.25rem 0.5rem 0.25rem 0;
- color: var(--ifm-color-black);
- text-decoration: none;
- font-weight: 500;
- font-size: var(--default-font);
+ .menu__link {
+ background: none;
- &:hover,
- &:focus {
- color: var(--ifm-color-primary);
- font-weight: 600;
- background: none !important;
+ &:hover {
+ background: none;
}
}
}
-
- /* Dark mode for mobile sidebar HTML links */
- [data-theme='dark'] & {
- .navbar-sidebar__item {
- .navbar-icon-link {
- color: var(--ifm-color-white);
-
- &:hover,
- &:focus {
- color: var(--ifm-color-primary);
- font-weight: 600;
- }
- }
+
+ .navbar-sidebar__item .navbar-icon-link {
+ display: block;
+ padding: 0.25rem 0.5rem 0.25rem 0;
+ color: var(--ifm-color-black);
+ text-decoration: none;
+ font-weight: 500;
+ font-size: var(--default-font);
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-primary);
+ font-weight: 600;
+ background: none;
}
}
-
- /* Ensure consistent spacing between all items */
+
+ /* Consistent spacing */
.navbar-sidebar__items {
padding: 1rem 0.5rem;
-
+
> .navbar-sidebar__item {
margin-bottom: 0.25rem;
}
}
}
+
+/* Dark mode for mobile sidebar */
+[data-theme='dark'] .navbar-sidebar {
+ .navbar-sidebar__item .navbar-icon-link {
+ color: var(--ifm-color-white);
+
+ &:hover,
+ &:focus {
+ color: var(--ifm-color-primary);
+ font-weight: 600;
+ }
+ }
+}
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 986486c3675..9b512eb190f 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -119,9 +119,40 @@ export default function NavbarWrapper(props) {
});
};
+ const markCustomDropdowns = () => {
+ // Add class hook for dropdowns with custom dropdown links (replaces :has(.my-custom-dropdown))
+ const customDropdownLinks = document.querySelectorAll('.navbar__link.my-custom-dropdown');
+ customDropdownLinks.forEach((link) => {
+ const dropdownItem = link.closest('.navbar__item.dropdown');
+ if (dropdownItem) {
+ dropdownItem.classList.add('dropdown--custom');
+ }
+ });
+ };
+
+ const markIconLinkItems = () => {
+ // Add class hook for navbar items containing icon links (replaces :has(.navbar-icon-link))
+ const iconLinks = document.querySelectorAll('.navbar-icon-link');
+ iconLinks.forEach((link) => {
+ const navItem = link.closest('.navbar__item');
+ if (navItem) {
+ navItem.classList.add('navbar__item--has-icon-link');
+ }
+ // Also mark parent list items in mobile sidebar
+ const menuListItem = link.closest('.menu__list-item');
+ if (menuListItem) {
+ menuListItem.classList.add('menu__list-item--has-icon-link');
+ }
+ // Mark sidebar items
+ const sidebarItem = link.closest('.navbar-sidebar__item');
+ if (sidebarItem) {
+ sidebarItem.classList.add('navbar-sidebar__item--has-icon-link');
+ }
+ });
+ };
+
const replaceCustomDropdownCarets = () => {
// Add custom SVG chevron for custom dropdown links
- // CSS already hides the default caret, so we just need to add our custom one
const customDropdownLinks = document.querySelectorAll('.navbar__link.my-custom-dropdown');
customDropdownLinks.forEach((link) => {
const dropdownItem = link.closest('.navbar__item.dropdown');
@@ -134,17 +165,6 @@ export default function NavbarWrapper(props) {
if (!chevronContainer) {
chevronContainer = document.createElement('span');
chevronContainer.className = 'custom-chevron';
- chevronContainer.style.position = 'absolute';
- chevronContainer.style.right = '0.5rem';
- chevronContainer.style.top = '30%';
- chevronContainer.style.transform = 'translateY(0%)';
- chevronContainer.style.transition = 'transform 0.2s ease';
- chevronContainer.style.opacity = '0.7';
- chevronContainer.style.width = '14px';
- chevronContainer.style.height = '14px';
- chevronContainer.style.display = 'block';
- chevronContainer.style.pointerEvents = 'none';
- link.style.position = 'relative';
link.appendChild(chevronContainer);
}
@@ -155,9 +175,6 @@ export default function NavbarWrapper(props) {
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('fill', 'currentColor');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
- svg.style.width = '14px';
- svg.style.height = '14px';
- svg.style.display = 'block';
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('fill-rule', 'evenodd');
@@ -166,8 +183,6 @@ export default function NavbarWrapper(props) {
svg.appendChild(path);
chevronContainer.appendChild(svg);
-
- // CSS will handle the rotation on hover/open
}
});
};
@@ -176,6 +191,8 @@ export default function NavbarWrapper(props) {
const updateNavbar = () => {
markActiveDropdowns();
markActiveNavItems();
+ markCustomDropdowns();
+ markIconLinkItems();
addDataTextAttributes();
replaceCustomDropdownCarets();
};
From 8da8221c2cb62a933db6b39aa8170af7c12e29e1 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 23 Jan 2026 09:58:46 -0500
Subject: [PATCH 14/16] move iso back
---
docs/docs/reference/time-syntax/_category_.yml | 4 ++++
.../time-syntax/rill-iso-extensions.md} | 4 ++--
2 files changed, 6 insertions(+), 2 deletions(-)
create mode 100644 docs/docs/reference/time-syntax/_category_.yml
rename docs/docs/{developers/build/metrics-view/time-series/time-syntax.md => reference/time-syntax/rill-iso-extensions.md} (96%)
diff --git a/docs/docs/reference/time-syntax/_category_.yml b/docs/docs/reference/time-syntax/_category_.yml
new file mode 100644
index 00000000000..49c16e94ec8
--- /dev/null
+++ b/docs/docs/reference/time-syntax/_category_.yml
@@ -0,0 +1,4 @@
+position: 200
+label: "Time Syntax"
+collapsible: false
+collapsed: false
\ No newline at end of file
diff --git a/docs/docs/developers/build/metrics-view/time-series/time-syntax.md b/docs/docs/reference/time-syntax/rill-iso-extensions.md
similarity index 96%
rename from docs/docs/developers/build/metrics-view/time-series/time-syntax.md
rename to docs/docs/reference/time-syntax/rill-iso-extensions.md
index 5be46c4c8ec..2be2f4361b3 100644
--- a/docs/docs/developers/build/metrics-view/time-series/time-syntax.md
+++ b/docs/docs/reference/time-syntax/rill-iso-extensions.md
@@ -1,7 +1,7 @@
---
-title: Time Syntax
+title: Rill ISO Extensions
description: Rill extensions to ISO 8601 time syntax
-sidebar_label: Time Syntax
+sidebar_label: Rill ISO Extensions
sidebar_position: 10
---
From f3301eb264252443792eba077122619810be1444 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:03:19 -0500
Subject: [PATCH 15/16] links
---
docs/blog/0.38.md | 2 +-
docs/docs/developers/build/dashboards/customization.md | 4 ++--
docs/docs/reference/project-files/canvas-dashboards.md | 4 ++--
docs/docs/reference/project-files/explore-dashboards.md | 4 ++--
docs/docs/reference/project-files/metrics-views.md | 4 ++--
runtime/parser/schema/project.schema.yaml | 4 ++--
6 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/docs/blog/0.38.md b/docs/blog/0.38.md
index b5cb0214f11..d9424bbe0f5 100644
--- a/docs/blog/0.38.md
+++ b/docs/blog/0.38.md
@@ -38,7 +38,7 @@ Read more about how to configure Themes by visiting our docs page [here](../../r
## Available Time Ranges
Rill has always treated time as an essential part of the product and with this release you will get even more capabilities around customizing selectable time periods and comparison periods.
-The `dashboard.yaml` introduces a new property called [available_time_ranges](/reference/project-files/explore-dashboards) that allows you define time ranges in [this format](/developers/build/metrics-view/time-series/time-syntax).
+The `dashboard.yaml` introduces a new property called [available_time_ranges](/reference/project-files/explore-dashboards) that allows you define time ranges in [this format](/reference/time-syntax/rill-iso-extensions).
You can either define this on a dashboard level or roll it out to all our dashboards via project defaults.
## Bug Fixes and Misc
diff --git a/docs/docs/developers/build/dashboards/customization.md b/docs/docs/developers/build/dashboards/customization.md
index 63e7badad4e..a10c972f0f0 100644
--- a/docs/docs/developers/build/dashboards/customization.md
+++ b/docs/docs/developers/build/dashboards/customization.md
@@ -28,7 +28,7 @@ security:
Default time range controls the data analyzed on initial page load. Setting the default time range improves user experience by setting it to the most frequently used period— in particular, avoiding `all time` if you have a large data source but only analyze more recent data.
-The value must be either a valid [ISO 8601 duration](https://en.wikipedia.org/wiki/ISO_8601#Durations) (for example, `PT12H` for 12 hours, `P1M` for 1 month, or `P26W` for 26 weeks) or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions).
+The value must be either a valid [ISO 8601 duration](https://en.wikipedia.org/wiki/ISO_8601#Durations) (for example, `PT12H` for 12 hours, `P1M` for 1 month, or `P26W` for 26 weeks) or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions).
### Default Dimensions
@@ -73,7 +73,7 @@ defaults:
## Time Ranges
-One of the more important configurations, available time ranges allow you to change the defaults in the time dropdown for periods to select. Updating this list allows users to quickly change between the most common analyses, like day over day, recent weeks, or period to date. The range must be a valid [ISO 8601 duration](https://en.wikipedia.org/wiki/ISO_8601#Durations) or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions).
+One of the more important configurations, available time ranges allow you to change the defaults in the time dropdown for periods to select. Updating this list allows users to quickly change between the most common analyses, like day over day, recent weeks, or period to date. The range must be a valid [ISO 8601 duration](https://en.wikipedia.org/wiki/ISO_8601#Durations) or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions).
```yaml
time_ranges:
diff --git a/docs/docs/reference/project-files/canvas-dashboards.md b/docs/docs/reference/project-files/canvas-dashboards.md
index 164ca9600ed..e605cba37cc 100644
--- a/docs/docs/reference/project-files/canvas-dashboards.md
+++ b/docs/docs/reference/project-files/canvas-dashboards.md
@@ -96,11 +96,11 @@ _[array of oneOf]_ - Overrides the list of default time range selections availab
```
- - **option 1** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection
+ - **option 1** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection
- **option 2** - _[object]_ - Object containing time range and comparison configuration
- - **`range`** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection _(required)_
+ - **`range`** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection _(required)_
- **`comparison_offsets`** - _[array of oneOf]_ - list of time comparison options for this time range selection (optional). Must be one of the [Rill ISO 8601 extensions](https://docs.rilldata.com/reference/rill-iso-extensions#extensions)
diff --git a/docs/docs/reference/project-files/explore-dashboards.md b/docs/docs/reference/project-files/explore-dashboards.md
index e9efe6f4ce5..ae9bd882689 100644
--- a/docs/docs/reference/project-files/explore-dashboards.md
+++ b/docs/docs/reference/project-files/explore-dashboards.md
@@ -144,11 +144,11 @@ _[array of oneOf]_ - Overrides the list of default time range selections availab
```
- - **option 1** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection
+ - **option 1** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection
- **option 2** - _[object]_ - Object containing time range and comparison configuration
- - **`range`** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection _(required)_
+ - **`range`** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection _(required)_
- **`comparison_offsets`** - _[array of oneOf]_ - list of time comparison options for this time range selection (optional). Must be one of the [Rill ISO 8601 extensions](https://docs.rilldata.com/reference/rill-iso-extensions#extensions)
diff --git a/docs/docs/reference/project-files/metrics-views.md b/docs/docs/reference/project-files/metrics-views.md
index d0c7d44ea7e..9456a3eaae8 100644
--- a/docs/docs/reference/project-files/metrics-views.md
+++ b/docs/docs/reference/project-files/metrics-views.md
@@ -346,11 +346,11 @@ _[object]_ - Defines an optional inline explore view for the metrics view. If no
- **`time_ranges`** - _[array of oneOf]_ - Overrides the list of default time range selections available in the dropdown. It can be string or an object with a 'range' and optional 'comparison_offsets'.
- - **option 1** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection
+ - **option 1** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection
- **option 2** - _[object]_ - Object containing time range and comparison configuration
- - **`range`** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection _(required)_
+ - **`range`** - _[string]_ - a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection _(required)_
- **`comparison_offsets`** - _[array of oneOf]_ - list of time comparison options for this time range selection (optional). Must be one of the [Rill ISO 8601 extensions](https://docs.rilldata.com/reference/rill-iso-extensions#extensions)
diff --git a/runtime/parser/schema/project.schema.yaml b/runtime/parser/schema/project.schema.yaml
index ea824a60e35..df3b7694aca 100644
--- a/runtime/parser/schema/project.schema.yaml
+++ b/runtime/parser/schema/project.schema.yaml
@@ -3286,13 +3286,13 @@ definitions:
explore_time_range_properties:
oneOf:
- type: string
- description: a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection
+ description: a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection
- type: object
description: Object containing time range and comparison configuration
properties:
range:
type: string
- description: a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/developers/build/metrics-view/time-series/time-syntax#extensions) extensions for the selection
+ description: a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Durations) duration or one of the [Rill ISO 8601 extensions](/reference/time-syntax/rill-iso-extensions#extensions) extensions for the selection
comparison_offsets:
type: array
description: list of time comparison options for this time range selection (optional). Must be one of the [Rill ISO 8601 extensions](https://docs.rilldata.com/reference/rill-iso-extensions#extensions)
From af09156ef5a2a1461e24b3043317f2c5c86cd6a7 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 29 Jan 2026 17:30:25 -0500
Subject: [PATCH 16/16] Update _navbar.scss
---
docs/src/css/_navbar.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/css/_navbar.scss b/docs/src/css/_navbar.scss
index 97b04e1e62a..28f1ebaea51 100644
--- a/docs/src/css/_navbar.scss
+++ b/docs/src/css/_navbar.scss
@@ -110,7 +110,7 @@
.custom-chevron {
position: absolute;
- right: 0.5rem;
+ right: 0.75rem;
top: 30%;
transform: translateY(0%);
transition: transform 0.2s ease;