How to make a nav item conditionally rendred in sidebar menu of CoreUI in ReactJS

Question

TL;DR: How to make a nav item conditionally rendred in sidebar menu of CoreUI?

So i have this nav menu from CoreUI template. I created a login nav item, clicking on it will direct me to login page to authenticate.

1. When you are authenticated: Menu Item will be turned into "Log Out", clicking on it will direct you to Home page.

2. When you are not authenticated: Menu Item will be "Login", clicking on it will direct you to login page.

_nav.js:

const _nav = [
//...
  {
    component: CNavItem,
    name: 'Login',
    to: '/login',
    icon: <LoginIcon />,
  },
]

AppSidebar.js:

import navigation from '../_nav'
const AppSidebar = () => {
  return (
    <CSidebar
    >
      <CSidebarNav>
        <SimpleBar>
          <AppSidebarNav items={navigation} />
        </SimpleBar>
      </CSidebarNav>
      />
    </CSidebar>
  )

Answer 1

You can turn your navigation config to a function that takes whether the user is authenticated as an argument and figures out what the login/logout part of the navigation should be:

const getNavConfig = (isAuthenticated) => [
//...
  {
    component: CNavItem,
    name: isAuthenticated ? 'logout' : 'Login',
    to: isAuthenticated ? '/home' : '/login',
    icon: isAuthenticated ? <LogoutIcon /> : <LoginIcon />,
  },
]

Just call it as a function in your AppSidebar component and pass the user's authentication status:

import navigation from '../_nav'
const AppSidebar = () => {
  const isAuthenticated = <the way you get your auth status>;

  return (
    <CSidebar
    >
      <CSidebarNav>
        <SimpleBar>
          <AppSidebarNav items={navigation(isAuthenticated)} />
        </SimpleBar>
      </CSidebarNav>
      />
    </CSidebar>
  )