Add different navbar on different pages with layout.js next js

user_19436684 0
Viewed 136

enter image description hereI've two navbar layout and ten pages in my next js project. Now I need to set navbar one for five pages and navbar two for rest of the pages with layout.js at once. How can I do this. If anyone help me about this, I'll be very thankful. Thanks in advance.

NavbarOne.js

const NavbarOne = () => {
  return (
    <div>
      <h1>Navbar One</h1>
    </div>
  );
}

export default NavbarOne;

NavbarTwo.js

const NavbarTwo = () => {
  return (
    <div>
      <h1>Navbar Two</h1>
    </div>
  );
}

export default NavbarTwo;

Layout.js

import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";


const Layout = ({ children }) => {
    return (
        <div>
            <NavbarOne />
            {/* <NavbarTwo /> */}
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

_app.js

import Layout from '../components/layout/Layout';
import '../styles/styles.scss'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp

Updated

Layout.js

import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";
import NavbarTwo from "../Navbar/NavbarTwo";


const Layout = ({ children, criteria}) => {
    return (
        <div>
            { criteria ?
              <NavbarOne />
              :
              <NavbarTwo />
            }
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

__app.js

import Layout from '../components/layout/Layout';
import '../styles/styles.scss'

function MyApp({ Component, pageProps }) {
  return (
    <Layout criteria={true}>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp

__admission.js

import Layout from "../components/layout/Layout";

const admission = () => {
    return (
        <Layout criteria={false}>
            <div>
            <h1>Admission</h1>
        </div>
        </Layout>
    );
}

export default admission;
next.js reactjs node.js javascript
3 Answers

You can do something like

const Layout = ({ children, criteria }) => {
    return (
        <div>
            { criteria ? //ternary operator
              <NavbarOne />
              :
              <NavbarTwo />
            }
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

And pass a boolean to your Layout as criteria to choose between Navbars

const Page1 = () => {
    return (
        <Layout criteria={true}> // will display navbar 1
          <p>Im page 1</p>
        </Layout>
    );
}

export default Layout;

const Page2 = () => {
    return (
        <Layout criteria={false}> // will display navbar 2
          <p>Im page 2</p>
        </Layout>
    );
}

export default Layout;

With three navbars you can do

const Layout = ({ children, navbarType }) => {
    return (
        <div>
            { navbarType == 1 &&  <NavbarOne />}
            { navbarType == 2 &&  <NavbarTwo />}
            { navbarType == 3 &&  <NavbarThree />}
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

And pass a number to your Layout as navbarType to choose between Navbars

const Page1 = () => {
    return (
        <Layout navbarType={1}> // will display navbar 1
          <p>Im page 1</p>
        </Layout>
    );
}

export default Layout;

const Page2 = () => {
    return (
        <Layout navbarType={2}> // will display navbar 2
          <p>Im page 2</p>
        </Layout>
    );
}

export default Layout;

const Page3 = () => {
    return (
        <Layout navbarType={3}> // will display navbar 3
          <p>Im page 3</p>
        </Layout>
    );
}

export default Layout;
user_168211090

If you prefer an option where, you want to add N number of navbars. and select them by some index number.

import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";


const Layout = ({ children, index }) => {
    const navBarList = [<NavbarOne />, <NavbarTwo />];
    const renderNavBar = (_index) => navBarList[_index];

    return (
        <div>
            {renderNavBar(index)}
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

In your where you calling your app, you should be calling it as such.

import Layout from './components/layout.js';

export default function Home() {
  return (
    <div>
      <Layout index={1}>
        <p>byebye</p>
      </Layout>
    </div>
  );
}
user_179037350

You can pass a props called navbar to the Layout Component like this:

export default function PageOne() {
    return (
        <Layout navbar="one">
            <div className="container">
                <h1>Page One</h1>
            </div>
        </Layout>
    )
}

export default function PageTwo() {
    return (
        <Layout navbar="two">
            <div className="container">
                <h1>Page Two</h1>
            </div>
        </Layout>
    )
}

And later render the Navbar Components conditionally like this:

const Layout = ({ children, navbar }) => {
    return (
        <div>
            { navbar === 'one' && <NavbarOne />}
            { navbar === 'two' && <NavbarTwo />}
            {children}
            <Footer />
        </div>
    );
}
user_110401670
Related