reactjs / reactjs/react.dev

[Bug]: Sidebar dropdown does not close when the arrow is clicked again

Aberta Para iniciantes
#8,618 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

bug: unconfirmed
Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

Summary

In the left sidebar navigation, when a section with sub-items is expanded (for example, "Installation"), clicking its downward-facing arrow again does not collapse the section. Users naturally expect an expand/collapse toggle arrow to work in both directions — even if this is intentional (e.g., to keep the active page's context visible), it hurts the UX since users assume clicking again will close the dropdown.

Page

https://react.dev/learn/installation

Details

To Reproduce

  1. Go to any documentation page with an expanded sidebar section, such as https://react.dev/learn/installation.
  2. Locate the left sidebar navigation.
  3. Click on the downward-facing arrow next to the currently active/expanded section (e.g., "Installation").
  4. Notice that the section does not collapse as expected.

Expected behavior
Clicking the dropdown arrow of an already expanded section should toggle it back to a collapsed state.

Desktop:

  • OS: Windows
  • Browser: Chrome

Additional context
Observed on the main react.dev documentation site. Fixing this would make the navigation feel more intuitive and aligned with standard UI patterns for accordions/dropdowns.

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece pela barra lateral em https://react.dev/learn/installation e rastreie o manipulador de clique da seta da seção expandida no site da documentação. Reproduza o comportamento no Chrome e, em seguida, verifique se clicar novamente na seta recolhe a seção, enquanto a navegação e o contexto da página ativa continuam funcionando.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
documentation, frontend
Tipo de issue
Bug
Dificuldade
2/5
Tempo estimado
1-3 horas
Status de atividade
Ativa
Clareza
Razoavelmente clara
Facilidade para iniciantes
68/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.