Skip to content

Fix topic sidebar toggle styling #1370

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

Open
IEvangelist wants to merge 1 commit into
base: main
Choose a base branch
from
+28 −9
Open

Fix topic sidebar toggle styling #1370

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
37 changes: 28 additions & 9 deletions src/frontend/src/components/starlight/Sidebar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1267,12 +1267,13 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
Collapse/expand stays available across all widths where the
sidebar itself is visible.

Sample detail pages (`.sample-detail`) opt out of this treatment —
they removed the mobile TOC bar but the flat in-bar styling reads
as a stray bar fragment next to the hero. They use the base
floating-tab style instead (rounded right edge, drop shadow,
page background) so the toggle reads as a tab projecting from the
sidebar rather than a leftover bar.
Topic landing pages keep the positioning but omit the synthetic
bar's background and borders because no TOC bar is present.

Sample detail pages (`.sample-detail`) opt out of this treatment
entirely. They use the base floating-tab style instead (rounded
right edge, drop shadow, page background) so the toggle reads as
a tab projecting from the sidebar.

Use a literal 3rem instead of var(--sl-mobile-toc-height, 3rem)
because the variable is explicitly set to 0rem outside of the
Expand All @@ -1283,19 +1284,37 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
:global(html:not([data-has-toc]):not(:has(.sample-detail))) .sidebar-expand-btn {
top: calc(var(--sl-nav-height, 4rem) + var(--aspire-banner-height, 0px) - 1px);
height: 3rem;
z-index: calc(var(--sl-z-index-toc, 10) + 1);
}

:global(html:not([data-has-toc]):not(:has(.sample-detail))) #sidebar-collapse-btn,
:global(html:not([data-has-toc]):not(:has(.sample-detail))) #sidebar-expand-btn {
border-radius: 0;
box-shadow: none;
border-inline-end: 1px solid var(--sl-color-gray-5);
border-block-end: 1px solid var(--sl-color-hairline-shade);
background: var(--sl-color-bg-nav);
z-index: calc(var(--sl-z-index-toc, 10) + 1);
}

:global(html:not([data-has-toc]):not(:has(.sample-detail))) .sidebar-collapse-btn:hover,
:global(html:not([data-has-toc]):not(:has(.sample-detail))) .sidebar-expand-btn:hover {
:global(html:not([data-has-toc]):not(:has(.sample-detail))) #topic-sidebar-collapse-btn,
:global(html:not([data-has-toc]):not(:has(.sample-detail))) #topic-sidebar-expand-btn {
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
}

:global(html:not([data-has-toc]):not(:has(.sample-detail))) #sidebar-collapse-btn:hover,
:global(html:not([data-has-toc]):not(:has(.sample-detail))) #sidebar-expand-btn:hover {
box-shadow: none;
background: var(--sl-color-bg);
}

:global(html:not([data-has-toc]):not(:has(.sample-detail))) #topic-sidebar-collapse-btn:hover,
:global(html:not([data-has-toc]):not(:has(.sample-detail))) #topic-sidebar-expand-btn:hover {
box-shadow: none;
background: transparent;
}
}

@media (max-width: 50rem) {
Expand Down
Loading