Hide Navbar in certain pages.
Answered
shadow posted this in #help-forum
shadowOP
Hey devs, i have in the layout of the root directory an navbar, so every page have thta navbar, until then everyting is good, but in /home i want to replace the navbar with sidebar, for that i create an layout.tsx for the /home directory and put the sidebar there, but now the navbar and the sidebar appear, how can i when im at /home, hide the navbar and just show the sidebar?
9 Replies
You can use this
usePathname https://nextjs.org/docs/app/api-reference/functions/use-pathnameand hide the navbar with css
Or... you can change the structure of your project in such a way that you'll put the navbar element on a layout.tsx for only pages that needs it.
shadowOP
but i cant use thta function in the layout because is server component
You can make it a client component if you like, but no problem.
In this case I would go with plan be:
Answer
a layout for all the pages with navbar
and the home page without any layouts 🙂