facebook / facebook/docusaurus

Unify navbar dropdown and sidebar category styling experience

Abierto
#8,132 1 comentario 0 reacciones 0 asignados Ver en GitHub
feature status: needs triage
Lenguaje dominante
TypeScript
Estrellas
66.2k
Forks
10k
Merge medio
1 d 3 h
PR fusionados (30 d)
52

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.