Как реализовать такой header?

Question

[Quiab]

Приветствую! Сразу попрошу не кидаться в меня камнями, совсем слаб во фронте, тянусь в бэк. Сижу рисую дизайн и сразу столкнулся с проблемой, к решению которой не знаю с какой стороны подойти. Буду благодарен за помощь в поиске решений такой фичи. JS читать могу, если без него не обойтись

Задача:
На условном хеадере будет иконка

При нажатии на которую выше хеадера будет появляться панель наполненная короткими текстовыми элементами

Answer 1

[Воващ]

Если судить по картинкам то:
кнопка -> клик -> auth__block меняет состояние из disaplay: none в block

Comments

[Ankhena]

Лучше классами манипулировать, а не менять display с помощью js.
А в классах писать какие угодно display, хоть флекс, хоть грид и т.д.

[Николай]

Можно и классом, добавлять и убирать этому блоку. Чтобы сделать плавность появлению, выставить max-height: 0; а добавляющийся класс, по клику, меняет это свойство, например max-height: 20px;

[Воващ]

Ankhena, Николай, я показал один из вариантов решения, он может использовать и toggle или менять высоты, просто я думаю данный способ максимально наглядно описывает принцип

[Николай]

Воващ, ну и комментарий больше был направлен автору, чтобы показать и другие способы ;-)

[Quiab]

@V0vas, спасибо! Отличное решение, радует, что я его понимаю. А то с момента ответа 20 минут ковырялся и пытался сам реализовать что-то похожее, но безуспешно)
Сложно уйти от этого решения к:
Где див login изначально отображать пустой блок (login_blank) с кнопкой и такими же параметрами
при нажатии на кнопку открывтаь блок login, скрывать блок login_blank, где размещена другая кнопка
при нажатии на которую скрывается блок login и отображается login_blank

Или при нажатии кнопки мутировать блок А в блок Б, при нажатии на кнопку блока Б мутировать его в блок А

или же проще продумать, как органично вписать эту кнопку в header?

[Воващ]

Quiab, я бы сделал примерно такую логику

кнопка в header по клику пропадает -> открывается логин -> с кнопкой login_btn
клик на login_btn спрячет блок login, показав кнопку в header

[Quiab]

Воващ, спасибо) Получилось, теперь работает как надо!