facebook / facebook/docusaurus

Unify navbar dropdown and sidebar category styling experience

Ouverte
#8,132 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
feature status: needs triage
Langage dominant
TypeScript
Étoiles
66.2k
Forks
10k
Merge moyen
1 j 3 h
PR mergées (30 j)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-issues).

### Description

The navbar dropdown arrow is not configurable and by default has a different style compared to the sidebar category arrow. We'd like to propose unifying this styling experience:

1. Remove the border-based styling from the navbar dropdown and replace it with styling similar to the background styling of the sidebar category.
2. Use a variable for the icon of the navbar dropdown and let it default to the same icon as the sidebar category.

### Has this been requested on Canny?

_No response_

### Motivation

It would allow for a consistent styling experience for similar components.

### API design

Not much would change. The icons would be configurable by either changing the associated CSS variables or by overriding the respective `:after` pseudo element.

### Have you tried building it?

We solve it now by using the following CSS snippet:

```
.dropdown > .navbar__link:after {
background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
border: none;
filter: var(--ifm-menu-link-sublist-icon-filter);
transform: rotate(180deg);
height: 1.25rem;
width: 1.25rem;
}
```

### Self-service

- [X] I'd be willing to contribute this feature to Docusaurus myself.

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.