feat(SidebarItem): hover effect #7934

Mohit5Upadhyay · 2025-07-02T12:18:02Z

Description

This PR adds a hover effect to the links in the website’s left sidebar navigation. This PR resolves issue #7893 by introducing a hover effect for links both for dark-mode and light-mode

Validation

sidebar-hover-effect-resolve.mp4

Related Issues

Fixes #7893

Check List

[✅] I have read the Contributing Guidelines and made commit messages that follow the guideline.
[✅] I have run pnpm format to ensure the code follows the style guide.
[✅] I have run pnpm test to check if all tests are passing.
[✅] I have run pnpm build to check if the website builds without errors.
[✅] I've covered new added functionality with unit tests if necessary.

vercel · 2025-07-02T12:18:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jul 5, 2025 7:06am

Copilot

Pull Request Overview

This PR adds interactive hover effects to sidebar links, ensuring distinct visual feedback in both light and dark modes.

Introduces hover background, text, and shadow styles for non-active sidebar items
Adds smooth transitions and rounded corners to the sidebar item container and its nested elements
Updates label, icon, and progressionIcon classes with consistent transition settings

packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

avivkeller

Why can't we do something like

&:hover {
    &:not(.progression) .label {
      @apply rounded-sm
        bg-whatever-600
        text-white;
    }
  }

Mohit5Upadhyay · 2025-07-03T08:08:16Z

Hi @avivkeller,

Thank you for the feedback! I understand you're suggesting to restructure the hover effects like this:

&:hover {
  &:not(.progression) .label {
    @apply rounded-sm
      bg-whatever-600
      text-white;
  }
}

The new hover styling targets .label only, instead of the entire .item background for hover.

I’ve implemented your suggested changes as follows:

&:hover {
    &:not(.progression) .label {
      @apply rounded-sm
        bg-green-600
        text-white
        dark:bg-green-400;
    }

    .icon {
      @apply scale-110
        text-green-600
        dark:text-green-400;
    }
  }

on the place of current PR code :

&:not(.active):hover {
    @apply bg-neutral-100
      text-neutral-900
      shadow-sm
      dark:bg-neutral-800
      dark:text-neutral-100;

    .icon {
      @apply scale-110
        text-green-600
        dark:text-green-400;
    }

    .label {
      @apply text-neutral-900
        dark:text-neutral-100;
    }
  }

Updated Hover Style:

The only differnce is that 🡥 , it appear outside the hover.

Please let me know if this matches with your suggested intention, or if there are any further tweaks or improvements you’d like me to make!

Also, should I update the existing one , if these chages are Okay ?

Thanks again for the guidance and review!

avivkeller · 2025-07-03T10:09:52Z

I think you should use the grey color you were using again

…inks

packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

Mohit5Upadhyay · 2025-07-04T11:18:47Z

Hi @avivkeller & @AugustinMauroy,

I’ve updated the sidebar hover to use the greyish background, matching the nav hover style as suggested.

After Chages:

I'd pushed all the chages. Let me know if there’s anything else you’d like me to adjust!
Thanks for the feedback.

…ded corners

Mohit5Upadhyay · 2025-07-04T12:59:10Z

I’ve reverted all unnecessary edits and kept only:

rounded-md: since on the learn tab from nav the links needed this property on the left-sidebar
margin-bottom: 1px;: to ensure proper spacing between items

All other unintended changes have been removed.
Please let me know if this looks good or if you’d prefer any further adjustments.
Thanks again for the thorough review!

ovflowd · 2025-07-04T13:41:19Z

Hovering on the Learn pages feels a bit odd now in some circumstances:

Looks like an unrelated bug? The hexagons seem to be weird on last and first entries apparently. We could address that on separate PRs

I've also noticed, these menus on the blog page don't have an hover effect, would you mind, @Mohit5Upadhyay to make another contribution on a separate PR with that? Thanks!

Also OOC, does it make sense to not include the arrow as part of the hover? (cc @avivkeller, maybe not, but just wondering...)

avivkeller · 2025-07-04T14:08:53Z

+1 on including the arrow, my guess would be to wrap them in a div

avivkeller · 2025-07-04T14:09:54Z

packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

+      text-sm
+      transition-colors
+      duration-200
+      ease-in-out;


avivkeller · 2025-07-04T14:10:13Z

packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

+  margin-bottom: 1px;
+


packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

Mohit5Upadhyay · 2025-07-04T14:54:09Z

I've also noticed, these menus on the blog page don't have an hover effect, would you mind, @Mohit5Upadhyay to make another contribution on a separate PR with that? Thanks!

Thanks! @ovflowd
Yes, I’d be happy to make another PR for that specific issue. Would you prefer that I create a new issue first to track it, or should I go ahead and open a PR directly? Thanks for the suggestion!

…nded corners, and clean unrelated styles as per review

Mohit5Upadhyay · 2025-07-04T17:17:56Z

hi @avivkeller & @ovflowd ,

Regarding Arrow icon included in hover:

I made changes so the intended behaviour can be achieved

Intended Behaviour Hover:

Also as per the suggestion I also removed unrelated chages but it causes:

Not proper vertical spacing between active-link & hovered link (does it intended?) - due to margin
removing rounded from .item will affect on Learn Tab links

I pushed my changes for review , please suggest me more tweaks if they required to be!
Thanks

avivkeller · 2025-07-04T17:58:06Z

packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx


-    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+    <div className={`${styles.label} flex items-center gap-1.5`}>


Let's put these styles in the CSS file

avivkeller · 2025-07-04T17:58:26Z

packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

    @apply font-regular
-      p-2
-      text-sm;
+      p-2;


Can we revert this, unless it's important?

codecov · 2025-07-04T18:00:20Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.36%. Comparing base (6ce9ac9) to head (1785286).
Report is 25 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7934      +/-   ##
==========================================
- Coverage   75.42%   75.36%   -0.06%     
==========================================
  Files          96       96              
  Lines        8354     8354              
  Branches      219      220       +1     
==========================================
- Hits         6301     6296       -5     
- Misses       2051     2056       +5     
  Partials        2        2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

avivkeller · 2025-07-04T18:01:51Z

Noted! Feel free to re-add those, as they are important, but please use tailwind to apply the margin

…on item

Mohit5Upadhyay · 2025-07-05T07:11:17Z

Hi @avivkeller,
Thanks again for the great feedback!

I’ve moved the flex, items-center, and gap-1.5 styles from JSX into the CSS .label class as suggested.

Noted! Feel free to re-add those, as they are important, but please use tailwind to apply the margin

I added these properties also as per suggestion

Let me know if there’s anything else you’d like me to refine!
Thanks!

Dismissed

fix: add hover effect to sidebar links (nodejs#7893)

baa0578

Copilot AI review requested due to automatic review settings July 2, 2025 12:18

Mohit5Upadhyay requested a review from a team as a code owner July 2, 2025 12:18

Copilot AI reviewed Jul 2, 2025

View reviewed changes

vercel bot deployed to Preview July 2, 2025 12:19 View deployment

avivkeller previously requested changes Jul 2, 2025

View reviewed changes

This comment has been minimized.

Sign in to view

fix(sidebar): update hover to neutral grey for consistency with nav l…

74a3a68

…inks

vercel bot deployed to Preview July 4, 2025 10:47 View deployment

avivkeller reviewed Jul 4, 2025

View reviewed changes

chore: remove unrelated style changes, keep necessary margin and roun…

939da2e

…ded corners

vercel bot deployed to Preview July 4, 2025 12:56 View deployment

avivkeller reviewed Jul 4, 2025

View reviewed changes

fix: include right-arrow icon in hover background; remove margin, rou…

1785286

…nded corners, and clean unrelated styles as per review

vercel bot deployed to Preview July 4, 2025 17:03 View deployment

avivkeller reviewed Jul 4, 2025

View reviewed changes

fix(sidebar): move flex styles to CSS file & adding margin , rounded …

8abdef2

…on item

vercel bot deployed to Preview July 5, 2025 07:06 View deployment

avivkeller changed the title ~~fix: add hover effect to sidebar links (#7893)~~ feat(SidebarItem): hover effect Jul 5, 2025


		{/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
		<div className={`${styles.label} flex items-center gap-1.5`}>

Uh oh!

feat(SidebarItem): hover effect #7934

Are you sure you want to change the base?

feat(SidebarItem): hover effect #7934

Conversation

Mohit5Upadhyay commented Jul 2, 2025

Description

Validation

Related Issues

Check List

Uh oh!

vercel bot commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

avivkeller left a comment

Choose a reason for hiding this comment

Uh oh!

Mohit5Upadhyay commented Jul 3, 2025

Updated Hover Style:

Uh oh!

avivkeller commented Jul 3, 2025

Uh oh!

This comment has been minimized.

Uh oh!

Uh oh!

Uh oh!

Mohit5Upadhyay commented Jul 4, 2025

After Chages:

Uh oh!

Mohit5Upadhyay commented Jul 4, 2025

Uh oh!

ovflowd commented Jul 4, 2025

Uh oh!

avivkeller commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avivkeller Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Mohit5Upadhyay commented Jul 4, 2025

Uh oh!

Mohit5Upadhyay commented Jul 4, 2025

Uh oh!

avivkeller Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jul 4, 2025

Codecov Report

Uh oh!

avivkeller commented Jul 4, 2025

Uh oh!

Mohit5Upadhyay commented Jul 5, 2025

Uh oh!

Uh oh!

vercel bot commented Jul 2, 2025 •

edited

Loading

avivkeller commented Jul 4, 2025 •

edited

Loading