App Router: How to show one logo on the homepage and a different one on other pages
Answered
LaPerm posted this in #help-forum
LaPermOP
How would I use only the root layout to detect if I'm on the homepage and show the company icon logo on that page (because the full logo is in the homepage banner) and then if I'm on any other page (it's a small site) show only the full company logo.
Since the root layout has to be a server component and usePathname hook can only be run on client components. Does this mean I have to have two layouts which are almost identical?
Since the root layout has to be a server component and usePathname hook can only be run on client components. Does this mean I have to have two layouts which are almost identical?
Answered by Ray
I would create two route group
app/(big-logo)/layout.tsxapp/(small-logo)/layout.tsx4 Replies
@LaPerm How would I use only the root layout to detect if I'm on the homepage and show the company icon logo on that page (because the full logo is in the homepage banner) and then if I'm on any other page (it's a small site) show only the full company logo.
Since the root layout has to be a server component and usePathname hook can only be run on client components. Does this mean I have to have two layouts which are almost identical?
I would create two route group
app/(big-logo)/layout.tsxapp/(small-logo)/layout.tsxAnswer
LaPermOP
yeah - that's pretty much what I've done. Thanks @Ray. Just wondered if there was a slicker way
and we don't even need to use client component there