How do I make my navbar invisible on 2nd step of a form
Answered
Anay-208 posted this in #help-forum
Anay-208OP
I'm making a step-by-step form and on the second step, I want the navbar to not be visible, and navbar is added in
While filling the form, the route will remain same, so I can't use
layout.tsx. what are my options?While filling the form, the route will remain same, so I can't use
usePathName in navbar.Answered by Anay-208
I guess the best solution would be to just adding navbar to page.tsx just for that specific route
18 Replies
Netherland Dwarf
Is this only for the second step
And if it okay to ask hide it only on the second step
one of the core principles of good page design is consistency
User shouldn’t be distracted by navbar while filling the form
personally if i dealt with not getting distracted on first time, i would be more distracted by it leaving
but anyway, you could use url params (change without actually refreshing page and sending things), or make your own context thingy
just use react interseciton observer
add a listener to the second part
and on observing, make the navbar invisible
Anay-208OP
I hope there was a way to do this:
Is it possible to make this
const navbar = useNavbar()
useEffect(() => {
navbar.hide()
})Is it possible to make this
one of the solution to make a different layout.tsx for that specific page, and add Navbar in page.tsx
@Arinji and on observing, make the navbar invisible
Anay-208OP
it would be too complex
@riský ~~https://canary.discord.com/channels/752553802359505017/766433464055496744/1245404042176499902~~
Anay-208OP
Oh wait, so I can basically just windows to store global variable, right?
im abusing js here... i think a bettr method would be an actual context, but this callback and setting useState works and i just wanted something
Anay-208OP
I guess the best solution would be to just adding navbar to page.tsx just for that specific route
Answer