facebook / facebook/docusaurus

Unify navbar dropdown and sidebar category styling experience

未关闭
#8,132 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
feature status: needs triage
主要语言
TypeScript
星标
66.2k
派生
10k
平均合并
1 天 3 小时
30 天内合并 PR
52

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。