freeCodeCamp / freeCodeCamp/devdocs

Improve sidebar styling

Open
#668 3 comments 7 reactions 0 assignees View on GitHub
improvement
Dominant language
Ruby
Stars
39.5k
Forks
2.6k
Avg merge
4d 32m
Merged PRs (30d)
13

Description

I feel like the sidebar could give mouse users better feedback with some cursor changes and hover color. Here's what I propose:

* Remove `__.list-item`'s `cursor: default` [(this line)](https://github.com/Thibaut/devdocs/blob/437eb8dd542e2a26b72a90ff723ead51aa719a9b/assets/stylesheets/components/_sidebar.scss#L112) to set it back to `auto` (which will be `cursor: pointer` on most browsers). Currently only the arrow provides feedback that the element is clickable.
* Add a `:hover` background color for `.list_item`:
```scss
.__list-item:hover {
background-color: #e3e3e3;
}
```

Current | New
--- | ---
![](https://i.imgur.com/XE8RZyI.gif) | ![](https://i.imgur.com/DRTaHTb.gif)

Contributor guide

Open the contributing guide

Research direction

Start in assets/stylesheets/components/_sidebar.scss at the linked __.list-item cursor rule. Review the proposed cursor and hover background changes, then compare the sidebar's mouse feedback with the current and reference behavior shown in the issue. Done means clickable sidebar items provide the proposed cursor and hover color without affecting other styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
frontend
Issue type
Feature
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.