My sidebar seems to appear everywhere on my components. I want it to only appear after login is successfull.
I have thought of using other methods but all to no avail.
App.js
const App = () => {
const onSearch = (value) => console.log(value);
// const {currentUser} = useContext(AuthContext)
const currentUser = false
const RequireAuth = ({children}) => {
return currentUser ? children : <Navigate to="/login" /> ;
};
console.log(currentUser)
return (
<AuthContextProvider>
<div>
<Sidebar/>
<div>
<Routes>
<Route path="/candidates" element={<RequireAuth> <Candidates /> </RequireAuth>} />
<Route path="/inbox" element={<RequireAuth><MainLayout /></RequireAuth>} />
<Route path="/profile" element={<RequireAuth> <Profile /></RequireAuth> } />
<Route path="/soon" element={ <RequireAuth> <ComingSoon /></RequireAuth> } />
<Route path="/login" element={ <Login />} />
</Routes>
</div>
</div>
</AuthContextProvider>
)
}
export default App;
My sidebar seen above the login page . I want it to only appear after login is successfull.
I have thought of using other methods but all to no avail.
OutPut
