How should the menu work?

Question

Web development

This is my first time making menus myself and there are some points I would like to clarify.
The menu layout is something like this:

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

At desktop screen sizes, I hide the .header. On a mobile screen, I hide .list. On click on the hamburger, I expand the .list under the header.
Thus the menu is obtained.
- Question one is the tangent menu
I use input type="checkbox" hiddento define in CSS, not open us menu, or is it not closed...? By input checkbox you can already add and remove styles.
Example: And I change the state of the input by clicking on the menu icon using the handleClick() function, which I wrote myself :) .
#menustate:checked {}
Yes, of course, you can add and remove a class. But I don't like this approach, because I have to create a lot of classes. How can you use React without using input? As far as I know, there is no way to get state in a CSS file. :) Give advice on how to implement this part correctly in your opinion using React.
- The second question
When the menu is opened by the user and there was a tap (click) on any link, the menu should close and rerout. If I write to each Link onClick={}, I think it is very wrong. If the site will be opened on a desktop, but these functions are simply not needed...
How to implement all this competently? Give advice, please :)
Thank you!

Answer 1

In React, it’s correct to put the current open/closed state into the state and, depending on this, render or not the corresponding markup, or add/remove a class that will already regulate the visibility and styles of elements.
You can also leave input if it suits.
There is no problem to write in each Link onClick. especially such that it was "very" wrong