hide navigation for mobile in layout
Unanswered
Sweat bee posted this in #help-forum
Sweat beeOP
hey, how would I hide the navigation for mobile devices in a proper way? I have it sit in layout in the body right on top. I use tailwind and usually I hide it via classNames like 'hidden lg:flex' but is that the proper way of doing it?
13 Replies
Thats the way I typically do it.
yes. resposiveness should be done with css where possible
Sweat beeOP
ok the solution that I came up with was getting the headers from next/headers which holds the user-agent and then checking if the userAgent matches /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i and voila I know if its mobile for example?!
does this have any disadvantage to the css way?
I guess anything design related should stay with css aye?
@Sweat bee does this have any disadvantage to the css way?
you cannot statically render the page is the biggest disadvantage
another disadvantage is that, what if i use a desktop browser but for whatsoever reason use a mobile-like screen width?
and that's entirely possible especially for people multitasking on small screens like laptop screens
Sweat beeOP
ok you have a point...
than the css way it is... 😉 thanks
just one more Q: Passing className as props and hide it in the layout or rather hide it in the first div container in the component itself?
@Sweat bee just one more Q: Passing className as props and hide it in the layout or rather hide it in the first div container in the component itself?
i would hide it in the first div container in the component
the responsive logic is related to the component itself and the component's parent shouldn't have to care about that logic