Theo's Typesafe Cult•2y ago

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•2y 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•2y 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•2y 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•2y ago

👍

kdiffin•2y ago

ya just use userouter and aspath

Gaming

Programming

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