Я впервые делаю меню сам, и есть некоторые моменты, которые я хотел бы уточнить.
Разметка меню примерно такая:
<ul class="header">
<li class="menuicon">
<!-- Hamburger -->
</li>
<li class="logo">
<!-- А здесь будет логотип -->
</li>
</ul>
<ul class="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
При десктопных размерах экрана, я скрываю
.header. При мобильном экране скрываю
.list. По клику на гамбургер я разворачиваю .list под header.
Таким образом получается меню.
- Вопрос первый касательное меню
Я использую
input type="checkbox" hidden для определения в CSS, а не открытали нас меню, или же не закрыта ли...? По input checkbox`у уже можно добавлять и удалять стили.
Пример:#menustate:checked {}
А состояние input`а я меняю по клике по иконке меню с помощью функции handleClick(), которую написал сам :) .
Да, конечно, можно добавлять и удалять класс. Но этот подход мне не нравится, так как придется много классов создавать. А как можно используя возможности React, не использовать input? Насколько я знаю, в CSS файле никак нельзя получать state. :) Дайте совет, как эту часть реализовать грамотно на ваш взгляд используя React.
- Второй вопрос
Когда меню открыто пользователем и был тап (клик) по любой ссылке, то меню должно закрыться и рераут. Если я напишу на каждый
Link onClick={}, я думаю это очень не правильно. Если сайт будет открыт на десктопе, но эти функии попросту не нужны...
Как это все грамотно реализовать? Дайте совет, пожалуйста :)
Спасибо! 
Средний