Skip to content

fix: Inconsistencies in sidebar ui #713

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
merged 1 commit into from
Nov 4, 2025
Merged

fix: Inconsistencies in sidebar ui #713

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
116 changes: 116 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,21 +136,137 @@ h4,
display: flex;
}
.menu__link--sublist:after {
/* Keep sidebar chevron size consistent with leaf items */
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
}

/* Ensure category caret variants use the same icon size in the sidebar */
div[class^="sidebar_"] .menu__link--sublist-caret:after {
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
}
div[class^="sidebar_"] .menu__caret:before {
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
height: 1.5rem;
width: 1.5rem;
}

div[class^="sidebar_"]
.menu__link.menu__link--active:not(.menu__link--sublist) {
padding-right: calc(var(--ifm-menu-link-padding-horizontal) - 2px);
}

/* Do not highlight category labels (that also have pages) as active; only leaf pages should be highlighted */
div[class^="sidebar_"] .menu__link--sublist.menu__link--active {
color: inherit !important;
font-weight: inherit;
}

/* Do NOT bold category when on its own page */
div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist {
color: inherit !important;
font-weight: inherit;
}
/* And keep color unchanged even on hover when on its own page */
div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist:hover {
color: inherit !important;
}

/* Explicitly neutralize color when category link is both sublist and active (own page) */
div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist.menu__link--active {
color: inherit !important;
}

/* When the category's own page is current, do not change its color/background/weight */
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"] {
color: inherit !important;
background: transparent !important;
font-weight: inherit !important;
}
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"]:hover,
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"]:focus,
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"].menu__link--active {
color: inherit !important;
/* prevent extra link-layer background; container provides unified hover */
background-color: transparent !important;
font-weight: inherit !important;
}

/* Strong override: category with its own current page should use normal menu color (not active black) */
div[class^="sidebar_"] .menu__link--sublist.menu__link--active[aria-current="page"] {
color: var(--ifm-menu-color) !important;
}

/* Extra-specific guard: ensure normal color for category labels on their own page */
div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"],
div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"].menu__link--active,
div[class^="sidebar_"] li.menu__list-item > div.menu__list-item-collapsible > a.menu__link.menu__link--sublist[aria-current="page"] {
color: var(--ifm-menu-color) !important;
background: transparent !important;
font-weight: inherit !important;
}

/* Restore hover background for categories with their own page when hovering that link */
div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"]:hover,
div[class^="sidebar_"] li.menu__list-item > div.menu__list-item-collapsible > a.menu__link.menu__link--sublist[aria-current="page"]:hover {
/* prevent extra link-layer hover; container provides unified hover */
background-color: transparent !important;
}

/* Unify hover background for text + caret (arrow) when category has its own page */
/* Use unified hover on container; clear child backgrounds to prevent double overlays */
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover {
background-color: var(--ifm-menu-color-background-hover) !important;
}
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > a.menu__link,
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > .menu__caret {
background-color: transparent !important;
}

/* For categories with pages (collapsible) when NOT on their page: hover on arrow OR text gives one unified background */
div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover {
background-color: var(--ifm-menu-color-background-hover) !important;
}
div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover > a.menu__link,
div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover > .menu__caret {
background-color: transparent !important;
}
/* Ensure link text color does not change on hover in this specific case */
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > a.menu__link {
color: inherit !important;
}

/* Remove background highlight when category's own page is active; keep hover behavior */
div[class^="sidebar_"] .menu__list-item-collapsible--active {
background: transparent !important;
}


/* Parent style when a child page is active is handled below for light mode (orange) */

/* Light mode: use orange color (no bold) for parent when a child page is active */
html[data-theme="light"] div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active) .menu__link--sublist.menu__link--active {
color: var(--ifm-color-primary) !important;
font-weight: inherit;
}

div[class^="sidebar_"] .button {
@apply mx-auto mb-2 w-full border-0;
}
div[class^="sidebar_"] .button svg {
@apply mx-auto;
}

/* Prevent descenders (g, y, p) from clipping in sidebar, including when bold/active */
div[class^="sidebar_"] .menu__link {
line-height: 1.5;
padding-bottom: calc(var(--ifm-menu-link-padding-vertical) + 1px);
}
div[class^="sidebar_"] .menu__link.menu__link--active {
line-height: 1.5; /* ensure active/bold state also has enough leading */
}

.table-of-contents {
@apply border-none pt-12;
}
Expand Down
Loading