This guide shows you how to control which pages your Navbar and Footer components show up on. This can be useful if you want your marketing pages to have a different layout than the rest of your app.
The simplest way to do this is to move those components from your layout component (src/pages/_app.js) into each page you want them to be displayed on. Here's what that would look like, both in code and within the Divjoy editor.
Code
- Remove the Navbar component from
src/pages/_app.js
2. Add the Navbar component to all pages where you'd like it displayed
3. Repeat for Footer or any other elements in your layout component that you'd like.
Divjoy Editor
In the Divjoy editor any component that's not under a page is part of the layout and will be displayed on all pages.
The animation on the left shows us moving Navbar from the layout into / (the homepage). We then clone the component and drag the new instance into /about. We'd repeat that process for each page we want to add the Navbar to.
This would result in the exact same code that you see in the code example above.
But wait, now the props on Footer are duplicated across all Footer instances 😕
If you don't like how every instance of Footer has to specify values like color or logo, then simply remove those props and hardcode those values inside the Footer component. For example, if the Footer on every page has the same logo (which is likely) then you can just hardcode that path inside Footer. You may still want to keep color as a prop if you'd like each page to be able to control the color of its Footer. It's your code, tweak it as needed.