Theo's Typesafe Cult•15mo 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•15mo 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

b_e_n_t_e_n•15mo 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•15mo 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

b_e_n_t_e_n•15mo ago

👍

kdiffin•15mo 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?