[UI/UX:Developer] Add hover effect to sidebar navigation items

[janhavitupe]

Add a hover background color to sidebar navigation items in the nav tree to provide visual feedback when hovering over non-active items.

The hover color (#eef6fb light / #3a3d42 dark) is intentionally lighter than the selected state color to maintain visual hierarchy between hovered and active items. Both light and dark themes are supported via CSS custom properties (--nav-hover) defined in _colors.scss, consistent with how the existing --nav-selected token works.

Changes:

• navtree.css: added #nav-tree .item:not(.selected):hover rule using var(--nav-hover)
• _sass/_colors.scss: added --nav-hover token for light and dark themes
• _sass/_dark-mode.scss: added hover rule with !important to override navtree.css in dark mode

Closes #12662 in https://github.com/Submitty/Submitty repository.

[shraddhaKodes]

Hi, I reviewed the changes, and the hover effect improves the sidebar interaction nicely.

I have a small suggestion: adding a smooth transition (e.g., transition: background-color 0.2s ease) could make the hover effect feel more polished.

Also, has the hover color contrast been checked for accessibility in both light and dark modes?

Thanks!

[janhavitupe]

@shraddhaKodes Thanks for the suggestions!

The smooth transition is already handled globally via the rule in _dark-mode.scss:
* { transition: background-color 200ms ease-in-out; }
so I didn’t add a separate transition in navtree.css to avoid redundancy.

I also checked the hover color contrast in both light and dark modes, and it meets requirements, so that should be covered.

Let me know if you'd still prefer an explicit transition or any adjustments!

[shraddhaKodes]

Thanks for the clarification!

That makes sense, especially keeping transitions consistent globally. Glad to know accessibility has been considered as well.

Looks good to me 👍