facebook / facebook/docusaurus

Unify navbar dropdown and sidebar category styling experience

Offen
#8,132 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
feature status: needs triage
Vorherrschende Sprache
TypeScript
Sterne
66.2k
Forks
10k
Ø Merge
1 T. 3 Std.
Gemergte PRs (30 T.)
52

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.