best way to conditionally show a logo on black or white depending on which nextjs page?

not sure how high it should be in component hierarchy while maintaining visual consistency/being inline with other elements?
5 Replies
Tom
Tom2y ago
i have a similar issue in my app, but for me only the home page has a different color. for my use case I just check useRouter().asPath for the / route and that works well enough theres lots of ways to do it, but it kinda depends on how youre doing state management, what determines the bg color youre trying to work against, etc
benten
benten2y ago
function Logo(){
const path = useRouter().pathname
switch(path){
case "/":
case "/foo":
case "/bar":
return <BlackLogo />
default:
return <WhiteLogo />
}
}
function Logo(){
const path = useRouter().pathname
switch(path){
case "/":
case "/foo":
case "/bar":
return <BlackLogo />
default:
return <WhiteLogo />
}
}
I'm not even joking lul don't abstract it until you for sure know how it's gonna work
Tom
Tom2y ago
yeah thast kinda what i did just with a single if. and also asPath is better for string matching if you have slugs in your urls
benten
benten2y ago
👍
kdiffin
kdiffin2y ago
ya just use userouter and aspath
Want results from more Discord servers?
Add your server