Skip to content

Change product switcher to neutral background with colored icon chip #385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JakeSCahill merged 12 commits into from
Jun 2, 2026
Merged

Change product switcher to neutral background with colored icon chip #385

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2849b47
Change product switcher to neutral background with colored icon chip
JakeSCahill Jun 1, 2026
a8d0830
Add icons to product switcher chips
JakeSCahill Jun 1, 2026
d4757e2
Fix nav collapse toggle visibility on mobile
JakeSCahill Jun 1, 2026
dcf602e
Fix missing space before 'Let us know' link in search results
JakeSCahill Jun 1, 2026
049f720
Fix back-to-top button overlapping pagination Next button
JakeSCahill Jun 1, 2026
13ae8e6
Remove icons from dropdown menu chips, keep color-only
JakeSCahill Jun 1, 2026
535b13e
Add margin-left to cloud link icon
JakeSCahill Jun 1, 2026
50f9556
Change ADP icon from brain to sparkles
JakeSCahill Jun 1, 2026
18631e5
Add ADP-specific condition to show sparkles icon
JakeSCahill Jun 1, 2026
d372ba3
Add missing parent components to preview UI model
JakeSCahill Jun 1, 2026
2784411
Match platform indicator font size to nav items
JakeSCahill Jun 1, 2026
a47db72
Fix SVG sizing for dropdown product chips
JakeSCahill Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/css/doc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1765,7 +1765,7 @@ details[open] > summary {
.back-to-top {
/* Use fixed positioning to prevent layout shift when shown/hidden */
position: fixed;
bottom: 24px;
bottom: 100px; /* Increased to avoid overlapping pagination Next button */
right: 24px;
z-index: 100;
display: flex;
Expand All @@ -1778,6 +1778,14 @@ details[open] > summary {
transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* On mobile, position back-to-top even higher to clear pagination */
@media screen and (max-width: 768px) {
.back-to-top {
bottom: 120px;
right: 16px;
}
}

.doc .button-bar {
display: flex;
gap: 10px;
Expand Down
10 changes: 5 additions & 5 deletions src/css/nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,11 @@ html .nav-container.is-active {
border-top: 1px solid var(--nav-border-color);
}

/* Sidebar footer collapse button - always visible (overrides .nav-collapse display:none) */
.sb-footer .sb-collapse-toggle.nav-collapse {
display: flex;
}

.nav-collapse:hover {
opacity: 1;
}
Expand Down Expand Up @@ -228,11 +233,6 @@ html .nav-container.is-active {
.nav-collapse {
display: none;
}

/* Override for sidebar footer collapse button - keep it visible */
.sb-footer .sb-collapse-toggle {
display: inline-grid;
}
}

.nav-container.is-active {
Expand Down
70 changes: 50 additions & 20 deletions src/css/product-switcher.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,40 @@
gap: 10px;
width: 100%;
padding: 10px 14px;
background: var(--component-color, #4f46e5);
border: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, filter 0.15s;
transition: background 0.15s, border-color 0.15s;
text-align: left;
}

.sb-product-switch:hover {
filter: brightness(1.1);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}

.sb-product-switch.is-open {
filter: brightness(1.15);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}

/* Small color indicator chip - hidden when button has full color bg */
/* Color indicator icon with component color background */
.sb-product-chip {
display: none;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--component-color, #4f46e5);
border-radius: 6px;
flex-shrink: 0;
}

.sb-product-chip svg {
width: 16px;
height: 16px;
color: #fff;
Comment on lines +48 to +51

@coderabbitai coderabbitai Bot Jun 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Dropdown icon SVG size conflicts with chip sizes

.sb-product-chip svg { width: 16px; height: 16px; } applies globally, but dropdown chips are still 10/8/6px in this file, so many new SVGs will clip or become unreadable in menu options.

Suggested CSS fix 
 .sb-product-chip svg {
   width: 16px;
   height: 16px;
   color: `#fff`;
 }
+
+/* Keep dropdown SVGs proportional to smaller chip containers */
+.sb-product-opt .sb-product-chip svg {
+  width: 8px;
+  height: 8px;
+}
+
+.sb-product-opt.sb-product-child .sb-product-chip svg {
+  width: 6px;
+  height: 6px;
+}
+
+.sb-product-opt.sb-product-grandchild .sb-product-chip svg {
+  width: 5px;
+  height: 5px;
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.sb-product-chip svg {
width: 16px;
height: 16px;
color: #fff;
.sb-product-chip svg {
width: 16px;
height: 16px;
color: `#fff`;
}
/* Keep dropdown SVGs proportional to smaller chip containers */
.sb-product-opt .sb-product-chip svg {
width: 8px;
height: 8px;
}
.sb-product-opt.sb-product-child .sb-product-chip svg {
width: 6px;
height: 6px;
}
.sb-product-opt.sb-product-grandchild .sb-product-chip svg {
width: 5px;
height: 5px;
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/css/product-switcher.css` around lines 48 - 51, The global rule
".sb-product-chip svg { width: 16px; height: 16px; }" forces all SVGs to 16px
and conflicts with the smaller dropdown chip sizes (10/8/6px); update the CSS so
the 16px sizing is scoped to non-dropdown chips (for example target a specific
modifier or direct child like ".sb-product-chip:not(.sb-product-chip--dropdown)
svg" or use a more specific selector for the main chip) and ensure dropdown
selectors (the rules that set 10/8/6px) explicitly override or set their own
sizes, or alternatively make the SVG sizing responsive by using
max-width:100%/height:auto so dropdown chips can control their own dimensions.

}

.sb-product-name {
Expand All @@ -42,7 +57,7 @@
align-items: flex-start;
gap: 1px;
font-size: calc(14 / var(--rem-base) * 1rem);
color: #fff;
color: #e8eef6;
font-weight: 500;
flex: 1;
letter-spacing: -0.01em;
Expand All @@ -59,15 +74,15 @@
.sb-product-parent-label {
font-size: calc(12 / var(--rem-base) * 1rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
color: #9aa8bc;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.3;
}

.sb-product-child-label {
font-size: calc(16 / var(--rem-base) * 1rem);
color: #fff;
color: #e8eef6;
line-height: 1.2;
}

Expand Down Expand Up @@ -124,38 +139,53 @@
color: #fff;
}

/* Light theme overrides - same solid color, white text */
/* Light theme overrides - neutral background with colored icon chip */
.sidebar[data-theme="light"] .sb-product-switch {
background: var(--component-color, #4f46e5);
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}

.sidebar[data-theme="light"] .sb-product-switch:hover {
filter: brightness(1.1);
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.12);
}

.sidebar[data-theme="light"] .sb-product-switch.is-open {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.15);
}

.sidebar[data-theme="light"] .sb-product-name {
color: #fff;
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-parent-label {
color: var(--grey-500-new, var(--grey-500, #79797d));
}

.sidebar[data-theme="light"] .sb-product-child-label {
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-section {
color: rgba(255, 255, 255, 0.7);
color: var(--grey-500-new, var(--grey-500, #79797d));
}

.sidebar[data-theme="light"] .sb-product-title {
color: #fff;
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-caret {
color: rgba(255, 255, 255, 0.7);
color: var(--grey-500-new, var(--grey-500, #79797d));
}

.sidebar[data-theme="light"] .sb-product-caret.rot {
color: #fff;
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-version {
background: rgba(255, 255, 255, 0.15);
color: #fff;
background: color-mix(in oklab, var(--component-color, #4f46e5) 15%, transparent);
color: var(--grey-700-new, var(--grey-700, #505053));
}

/* Dropdown menu */
Expand Down
2 changes: 1 addition & 1 deletion src/partials/algolia-script.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -766,7 +766,7 @@ function initAlgolia() {
return html`
<div>No results for ${state.query}</div>
<p>
Believe this query should return results?
Believe this query should return results?${' '}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/redpanda-data/documentation/issues/new?title=No%20search%20results%20for%20${state.query}">
Let us know
</a>.
Expand Down
52 changes: 39 additions & 13 deletions src/partials/product-switcher.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,23 @@
>
{{!-- For Labs pages, show "Product Docs" instead of "Labs" --}}
{{#if (eq page.component.name 'labs')}}
<span class="sb-product-chip" style="background: var(--component-color, #6366f1);"></span>
<span class="sb-product-chip" style="background: var(--component-color, #6366f1);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>
</span>
<span class="sb-product-name">View Product Docs</span>
{{else if (eq page.attributes.role 'home')}}
{{!-- Home page: show ADP as current product --}}
<span class="sb-product-chip" style="background: {{get-component-color site 'agentic-data-plane'}};"></span>
<span class="sb-product-chip" style="background: {{get-component-color site 'agentic-data-plane'}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/></svg>
</span>
<span class="sb-product-name">Agentic Data Plane</span>
{{else if (eq page.component.name 'cloud-data-platform')}}
{{!-- Cloud pages: show hierarchy "Data Platform > Cloud" --}}
{{#with (find-component site 'cloud-data-platform')}}
{{#with (get-component-header-data this)}}
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
</span>
{{/with}}
{{/with}}
<span class="sb-product-name sb-product-name--hierarchy">
Expand All @@ -77,7 +83,9 @@
{{!-- Self-Managed pages (Streaming, Connect, Self-Managed home): show hierarchy "Data Platform > Self-Managed" --}}
{{#with (find-component site 'self-managed')}}
{{#with (get-component-header-data this)}}
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
</span>
{{/with}}
{{/with}}
<span class="sb-product-name sb-product-name--hierarchy">
Expand All @@ -96,20 +104,26 @@
{{!-- Data Platform landing: show "Data Platform" --}}
{{#with (find-component site 'data-platform')}}
{{#with (get-component-header-data this)}}
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
</span>
<span class="sb-product-name">{{this.title}}</span>
{{/with}}
{{/with}}
{{else}}
{{!-- Other components: show their product name --}}
{{#with page.component}}
{{#with (get-header-data @root.page)}}
<span class="sb-product-chip"></span>
<span class="sb-product-chip">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>
</span>
<span class="sb-product-name">
<span class="sb-product-title">{{#if this.title}}{{{this.title}}}{{else}}{{{../title}}}{{/if}}</span>
</span>
{{else}}
<span class="sb-product-chip"></span>
<span class="sb-product-chip">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>
</span>
<span class="sb-product-name">{{{this.title}}}</span>
{{/with}}
{{/with}}
Expand All @@ -135,7 +149,9 @@
data-product-url="{{{relativize ../url}}}"
style="--product-color: {{#if this.color}}{{this.color}}{{else}}#ea580c{{/if}};"
>
<span class="sb-product-chip" style="background: {{#if this.color}}{{this.color}}{{else}}#ea580c{{/if}};"></span>
<span class="sb-product-chip" style="background: {{#if this.color}}{{this.color}}{{else}}#ea580c{{/if}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/></svg>
</span>
<span class="sb-product-opt-text">
<span class="sb-product-opt-name">Agentic Data Plane</span>
{{#if this.description}}
Expand Down Expand Up @@ -166,7 +182,9 @@
data-product-url="{{{relativize ../url}}}"
style="--product-color: {{this.color}};"
>
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
</span>
<span class="sb-product-opt-text">
<span class="sb-product-opt-name">{{this.title}}</span>
<span class="sb-product-opt-desc">{{this.description}}</span>
Expand All @@ -191,7 +209,9 @@
data-product-url="{{{relativize ../url}}}"
style="--product-color: {{this.color}};"
>
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
</span>
<span class="sb-product-opt-text">
<span class="sb-product-opt-name">{{this.title}}</span>
<span class="sb-product-opt-desc">{{this.description}}</span>
Expand All @@ -217,7 +237,9 @@
data-product-url="{{{relativize ../url}}}"
style="--product-color: {{this.color}};"
>
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
</span>
<span class="sb-product-opt-text">
<span class="sb-product-opt-name">{{this.title}}</span>
<span class="sb-product-opt-desc">{{this.description}}</span>
Expand All @@ -240,7 +262,9 @@
data-product-url="{{{relativize ../url}}}"
style="--product-color: {{this.color}};"
>
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6 12 4-4v8l4-4v8"/><path d="M14 4v8l4-4v8l4-4"/></svg>
</span>
<span class="sb-product-opt-text">
<span class="sb-product-opt-name">{{this.title}}</span>
<span class="sb-product-opt-desc">{{this.description}}</span>
Expand All @@ -265,7 +289,9 @@
data-product-url="{{{relativize ../url}}}"
style="--product-color: {{this.color}};"
>
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><rect width="16" height="5" x="4" y="7" rx="1"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M8 17v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2"/></svg>
</span>
<span class="sb-product-opt-text">
<span class="sb-product-opt-name">{{this.title}}</span>
<span class="sb-product-opt-desc">{{this.description}}</span>
Expand Down
Loading