I'm in the process of creating a website as part of a project, where I have set up a vertical navigation bar next to the main content area. Utilizing bootstrap, I divided the layout into two main columns - one for the navigation bar and the other for the content, which is displayed using routing. Initially, I applied the "fixed-top" class to the navbar column, ensuring that it stays in place on the viewport even when scrolling.
Now, the navbar includes buttons that direct users to either the login page or their profile, depending on their logged-in status.
In attempting to implement this feature, I experimented with conditional rendering in my navbar function component. Employing an if-else statement, I tried to display the entire navbar with either the sign-in button or the profile and logout buttons based on the user's login status. However, this modification caused the navbar to lose its fixed position and scroll along with the rest of the page.
Could this issue be due to my implementation process? Or is it a limitation of conditional rendering? How can I resolve this issue?
Here is the basic structure of my app functional component:
function App() {
return (
<Router>
<div className="App">
<Container fluid>
<Col className="fixed-top">
<Navbar />
</Col>
<Col>
<Routes>
All the routing logic goes here
</Routes>
</Col>
</Container>
</div>
</Router>
);
}
export default App;
And here is the basic structure of my navbar functional component:
const Navbar = () => {
// Firebase integration to check user authentication status
const auth = getAuth();
const [status, setStatus] = useState({
status: "signed out"
})
useEffect(()=>{
onAuthStateChanged(auth, (user) => {
if (user) {
setStatus({
status: "signed in"
});
} else {
setStatus({
status: "signed out"
});
}
});
}, [])
if(status.status == "signed out") {
return (
<Card>
// Navbar content including website title and logo
<ButtonGroup vertical>
1. Sign in button
</ButtonGroup>
</Card>
);
} else {
return (
<Card>
// Navbar content including website title and logo
<ButtonGroup vertical>
1. Profile page button
2. Logout button
</ButtonGroup>
</Card>
);
}
}
export default Navbar;
I've explored various methods of conditional rendering, but none have resolved the issue so far. I appreciate any assistance or suggestions on how to tackle this challenge. Thank you!