Mobile: Navbar to Drawer? about daisyui HOT 1 CLOSED

Currently there's a navbar component and it just places items in a row using flexbox. There's also a drawer component which opens an off-canvas sidebar (or shows a fixes sidebar on desktop lg viewport if you want)

One solution might be dynamically changing the style of navbar items into a vertical menu and place them in a drawer.

• pros:
  • no duplicate HTML for menu items
• cons:
  • what actually is happening here is transforming one component to another component.
  • there could be anything on a navbar or sidebar drawer. it's not always a simple menu, so it might not the best decision to just put everything from navbar into a vertical drawer for mobile.

The other solution is just having a navbar, hide extra items on mobile resolution. then having a drawer to show the items on mobile. (see example here)

• pros:
  • there's no limit. you can put anything on your navbar and your drawer. not only a menu.
  • you can control which item should be visible on mobile or desktop (using hidden class)
• cons:
  • duplicate html for the menu (if you want to show it horizontally on desktop and vertically on mobile)

I'm not strict on this and I'm also looking for the best solution but for now, I think the second solution makes more sense and gives you more control (like this)

from daisyui.