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

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.