Experimenting with ReactJS and Bootstrap 4 to create a customized NavBar.
Seeking guidance on aligning elements in the NavBar, such as centering some and placing others on the right side.
Particularly interested in positioning the logout icon on the right-hand side of the NavBar.
Here's the current state:
https://i.sstatic.net/Caa6G.png
Review the existing code snippet:
render () {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{
!localStorage.getItem('token') &&
<button className="btn btn-dark" onClick={this.loginClicked}>Login</button>
}
{
localStorage.getItem('token') &&
<div className="mx-auto order-0">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup className="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
<button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
}
</nav>
);
}
Desired outcome for the NavBar layout: