Skip to content

style(sidebar): make hover full-width and add clearer item spacing #8158

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
Sep 10, 2025
Merged

style(sidebar): make hover full-width and add clearer item spacing #8158

Show file tree
Hide file tree
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
style(sidebar): make hover full-width and add clearer item spacing
  • Loading branch information
@IslemDjd
IslemDjd committed Sep 9, 2025
commit be4466ea429140b8a80ba9b9d7abb004170e0610
7 changes: 7 additions & 0 deletions packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
flex-col
gap-2;

/* Default item list spacing for non-progression groups */
.itemList {
@apply flex
flex-col
gap-1;
}

&:not(.progression) {
.groupName {
@apply px-2
Expand Down
45 changes: 30 additions & 15 deletions packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,21 @@
flex
w-full
items-center
gap-1
overflow-hidden
rounded-md
text-sm
text-neutral-800
dark:text-neutral-200;

&:hover {
&:not(.progression) .label {
/* @see https://github.com/nodejs/nodejs.org/blob/main/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css#L24 */
@apply rounded-sm
bg-neutral-100
text-neutral-900
dark:bg-neutral-900
&:not(.active):hover {
/* Apply hover background to the full item width */
@apply bg-neutral-100
dark:bg-neutral-900;

/* Ensure text colors contrast with hover background */
.label {
@apply text-neutral-900
dark:text-neutral-100;
}

Expand Down Expand Up @@ -64,25 +66,38 @@
@apply p-1;
}

&:not(.active):hover .label {
@apply rounded-sm
bg-neutral-100
/* On hover, use full-width background on the item (set above) */
&:not(.active):hover {
@apply bg-neutral-100
dark:bg-neutral-900;
}

/* Avoid extra pill background on the label when hovering */
&:not(.active):hover .label {
@apply rounded-none
bg-transparent;
}
}

&.active {
@apply text-neutral-900
dark:text-white;
/* Full-width active background and readable text */
@apply bg-green-600
text-white;

.progressionIcon {
@apply fill-green-500;
}

&:not(.progression) .label {
@apply rounded-sm
bg-green-600
/* Remove pill background on the label; keep full-width bg on the item */
.label {
@apply rounded-none
bg-transparent
text-white;
}

/* Preserve active background on hover */
&:hover {
@apply bg-green-600;
}
}
}
Loading