How to use same navbar in reactjs to do the work of two navbar?

user_13846577 0
Viewed 33

I have to make an admin portal in which I have two home pages, so I need two navbars with different options and with different links.

But what I want to do is use the same navbar to work as others if we log in to another page.

function OrgAdminNavbar(): JSX.Element {
  return (
    <>
      <div className={styles.header_block}>
        <img src={Logo} className={styles.logo} />
        <strong className={styles.heading}>TalawaAdmin</strong>
      </div>
      <div className={styles.left_block}>
        <li>
          <a href="/orghome">Home</a>
        </li>
        <li>
          <a href="/orgmember">Member</a>
        </li>
        <li>
          <a href="/">LogOut</a>
        </li>
      </div>
    </>
  );
}

export default OrgAdminNavbar;

this is my first navbar

function SuperAdminNavbar(): JSX.Element {
  return (
    <>
      <div className={styles.header_block}>
        <img src={Logo} className={styles.logo} />
        <strong className={styles.heading}>TalawaAdmin</strong>
      </div>
      <div className={styles.left_block}>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/supermember">People</a>
        </li>
        <li>
          <a href="/superorg">Organization</a>
        </li>
        <li>
          <a href="/">LogOut</a>
        </li>
      </div>
    </>
  );
}

export default SuperAdminNavbar;

And this is my second navbar basically I want to merge it.

reactjs html
2 Answers

You can take the urls as props, and can use it twice in the parent file.

user_137961900

You can pass an array of names and urls to a generic Navbar component:

interface NavbarProps {
  targets: { url: string, name: string }[]
}

function Navbar({ targets }: NavbarProps): JSX.Element {
  return (
    <>
      <div className={styles.header_block}>
        <img src={Logo} className={styles.logo} />
        <strong className={styles.heading}>TalawaAdmin</strong>
      </div>
      <div className={styles.left_block}>
        {targets.map(({ name, url}) => <li key={name}><a href={url}>{name}</a></li>)}
      </div>
    </>
  );
}

And use it like so:

<Navbar
  targets={[
    { name: 'Home', url: '/'},
    { name: 'People', url: '/supermember'},
    { name: 'Organisation', url: '/superorg'}
  ]}
/>
user_93654310
Related