facebook / facebook/docusaurus

Unify navbar dropdown and sidebar category styling experience

Aperta
#8,132 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
feature status: needs triage
Lingua principale
TypeScript
Stelle
66.2k
Fork
10k
Merge medio
1g 3h
PR unite (30g)
52

Descrizione

### 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.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.