daisyui icon indicating copy to clipboard operation
daisyui copied to clipboard

Navbar is not correct in mobile

Open Thenafi opened this issue 3 years ago โ€ข 1 comments

Screenshot_2022-11-24-11-30-29-00_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

This not render correctly in phone.

Thenafi avatar Nov 24 '22 05:11 Thenafi

Why would someone want to use daisy UI from their phone ?!

Sahad-09 avatar Jun 01 '23 18:06 Sahad-09

Having mobile responsiveness built in would be fantastic, as I typically have to implement it myself. It would be very convenient to have it included by default.

sgrds avatar Jun 05 '23 23:06 sgrds

This is fixed.

Having mobile responsiveness built in would be fantastic, as I typically have to implement it myself. It would be very convenient to have it included by default.

For navbar I really shouldn't decide for everyone how they want their items too look like on mobile.

From this related discussion:

It's not a good idea for the navbar itself to be responsive because there are infinite ways to make a navbar depending on the content (logo, menu, buttons, dropdown, text, icons, search field...) and where to position each one (left, center, right) and how we want them to be placed on mobile. Even sometimes we need to completely restructure things on mobile (for example moving a search field from navbar to sidebar or transforming menu items from "text + icon" to "icon only" So if I provide a few specific ways to design a navbar. it would limit the design choices completely. Instead, we provide positioning options. You can position items at start, end, or center. Then you can decide what to show/hide on different screens using Tailwind CSS utility classes. (something like hidden lg:block to show it only on desktop. Or lg:hidden to show it only on mobile) This is the most efficient and customizable way

So in the document site I provided a few examples to show/hide different parts. It's not hard. It's either something like hidden lg:flex or lg:hidden
But the class names that daisyUI provide are just for positioning (left/right/center) and it's really more than a simple flex because each section can work independently and the center part always stays in the center regardless of other sections' width. So I think even though it's not providing responsive parts (because of reasons I mentioned) it's still useful.

saadeghi avatar Jun 05 '23 23:06 saadeghi