Working with menus, writing two menus for desktop and mobile, or creating one menu for all devices? How to solve it?

Question

Layout

And so, there is a menu, it is huge, over 20-30 links + dropdown inside some links.

When laying out a full-fledged full-screen burger menu, you will have to copy the menu that I made up for screen sizes over 500px wide, and do the same menu, but with classes for the mobile version.

That is, in theory, we have two versions of the menu:

1) Desktop
2) mobile, which replaces the desktop only when you click on the burger icon with the mouse.

As far as I know and have seen in projects I have worked on in companies, many layout designers / frontend developers prefer to write two menus separately, and not overlay too many classes and write 100500 lines for the menu and get confused in the layout.

I've even seen some big company sites do this using the two menu system <500px and >500px.

How true is that? Which option is better? And is it possible to lay out one menu so that it fully covers my needs for mobile layout without using extra divs and keep the code as clean as possible?

Answer 1

Bootstrap + multilevel menu ?