How do I get my sidebar navigation to only display when a user is logged in

I am currently using react V6. I have a sidebar nav and a top bar nav. The top bar nav is supposed to display when the user has NOT been authenticated. The sidebar nav is only supposed to display when the user has logged in. But my sidebar nav is showing on for all routes and my top nav isn't displaying at all.

APP.JS

function App() {

const { user, authIsReady } = useAuthContext()

  const theme = createTheme({
    palette: {
      mode: 'light',
    },
    typography: {
      guideline: {
        color: 'gray',
        display: 'block',
      },
    },
  });

return (
 <ErrorBoudry>
   <div className="App">
    {authIsReady && (
    <BrowserRouter>
        {user && <Sidebar />}
        <div className='container'>
        <NavBar/>
             <Routes>
               <Route path="/" element={<LandingPage />} />
               <Route path="/login" element={<LoginPage />} />
               <Route path="/register" element={<RegisterPage />} />


                <Route path="/dashboard" element={
                <ProtectedRoute>
                <DashboardPage/>
                </ProtectedRoute>
                 }/>
                <Route path="/findMatch" element={
                 <ProtectedRoute>
                <findMatchPage />
                </ProtectedRoute>
                }/>
                <Route path="/profile" element={
                 <ProtectedRoute>
                <ProfilePage />
                </ProtectedRoute>
                }/>
                <Route path="/match-history" element={
                  <ProtectedRoute>
                <MatchHistoryPage />
               </ProtectedRoute>
                }/>
              </Routes>
               </div>
                {user && <OnlineUsers />}
              </BrowserRouter>
              )}
              </div>
             </ErrorBoudry>
            );
         }
export default App

NAVBAR.JS

export default function Navbar() {

    const { logout, isPending } = useLogout()
    const { user } = useAuthContext()

    return (
        <div className='navbar'>
            <ul>
                <li className='logo'>

                    <span>Gamers Meet</span>
                </li>

                {user ?
                    <li>
                            {!isPending && <button className='btn' onClick={logout}>logout</button>}
                            {isPending && <button className='btn' disabled>logging out</button>}
                    </li>
                :
                    <>
                            <li>
                            <Link to='/landing'>Home</Link>
                            </li>

                        <li>
                            <Link to='/login'>login</Link>
                        </li>
                        <li>
                            <Link to='/register'>Register</Link>
                        </li>
                    </>
                }
            </ul>
        </div>

    )

}

SIDEBAR.JS

export default function Sidebar() {


    const { user } = useAuthContext()

    return (
        <div className='sidebar'>
            <div className='sidebar-content'>
                <div className='user'>
                    <Avatar src={user.photoURL} />
                    <p>hey {user.displayName}!</p>
                </div>
                <nav className='links'>
                    <ul>
                        <li>
                            <NavLink exact to='/dashboard'>
                                <img src={DashboardIcon} alt='dashboard icon' />
                                <span>dashboard</span>
                            </NavLink>
                        </li>
                        <li>
                                <NavLink to='/findMatch'>
                                <img src={AddIcon} alt='add icon' />
                                <span>Find a Match</span>
                            </NavLink>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
    )
}

PROTECTEDROUTE.JS

import React from 'react';
import { Navigate } from 'react-router-dom';



const ProtectedRoute = ({ isLoggedIn, children }) => {
 if (!isLoggedIn) {
 return <Navigate to="/" replace />;
 }
 return children;
};
export default ProtectedRoute;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/TqDuQgm