freeCodeCamp / freeCodeCamp/devdocs
Improve sidebar styling
- 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
--- | ---
 | 
Contributor 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