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.
Keep in mind that your code may look slightly different then the examples below, depending on your Divjoy export options. The main structure, variables, and function names should be the same though.
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.
- Remove the Navbar component from
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.
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
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.
Did you find this guide helpful? Anything confusing? Please reach out and let us know.