Uma das coisas mais poderosas que você pode aprender como um novo desenvolvedor front-end que está começando a aprender JavaScript é mudar de classe . Se você pode mudar de classe, você pode usar suas habilidades de CSS para controlar muito em uma página. Alterne uma classe para uma coisa, estilize dessa maneira, alterne para outra classe (ou remova-a) e estilize-a de outra maneira.
Mas há um elemento HTML que também alterna! <details>! Por exemplo, é definitivamente a maneira mais rápida de criar uma interface de usuário de acordeão .
Estendendo esse pensamento baseado em alternância, o que é um menu de usuário, se não para um único acordeão? O mesmo com os modais. Se seguíssemos esse caminho, poderíamos tornar o JavaScript opcional nessas coisas dinâmicas. Isso é exatamente o que o GitHub fez com seu menu.
Dentro do <details>elemento, o GitHub usa alguns componentes da Web (que exigem JavaScript) para fazer alguns bônus, mas eles não são necessários para a funcionalidade básica do menu. Isso significa que o menu é resiliente e instantaneamente interativo quando a página é renderizada.