I'm encountering a CSS issue with the header section.
When I include the following code snippet in my code to display a tab based on a condition, the entire header list doesn't appear in a single horizontal line:
<div>
{isAdmin(user) ?(
<div >
<li>
<NavLink to="/datarequest">Data Request</NavLink>
</li>
<li>
<NavLink to="/datarequestperson">Person Data Request</NavLink>
</li>
</div>
) : (
<li>
<NavLink to="/datarequest">Data Request</NavLink>
</li>
)
}
</div>
It works fine when I remove the above part and keep it like this, which is not ideal as I need to hide a tab based on a certain condition:
<li>
<NavLink to="/datarequest">Data Request</NavLink>
</li>
<li>
<NavLink to="/datarequestperson">Person Data Request</NavLink>
</li>
I found the CSS related to the header-list class in the code:
ul.header-list li {
display: inline;
list-style-type: none;
margin: 0;
}
ul.header-list {
background-color: #fff;
padding: 0 15px 0 0;
float: right;
margin: 0px;
}
ul.header-list li a {
color: #000;
text-decoration: none;
padding: 20px 12px;
display: inline-block;
transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
margin: 0 2px;
}
ul.header-list li a.active, ul.header-list li a:hover{
background: #0f5a25;
color: #fff;
transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
cursor: pointer;
}
How can I resolve this issue so that I can also display the tabs based on the isAdmin condition without affecting the CSS?
The return method in my code looks like this:
return (
<div>
{
this.state.isAuthenticated ? (
<BrowserRouter basename={process.env.REACT_APP_ROUTER_BASE || ''}>
<div>
<div className="header">
<div className="header-logo">
<img src="images/mylogo.jpg"/>
<span>DATA GRID</span>
</div>
<div className="logout_sec">
<div className="logout_icon">
<a href="javascript:void(0)" onClick={this.logoutDialogOpen}> <FontAwesomeIcon
style={{fontSize: '1.5em'}} icon={faSignOutAlt}/></a>
</div>
</div>
<ul className="header-list">
<li>
<NavLink exact to="/">
Home
</NavLink>
</li>
<li>
<NavLink to="/myprojects">My Projects</NavLink>
</li>
... (remaining HTML code goes here)
</ul>
{/* Popup COde start */}
{logoutDialog}
{/* Popup code End */}
</div>
<div id="forNotification"></div>
<div>
<Switch>
<Route exact path="/" component={Home}/>
... (more route declarations)
<Redirect to="/404"/>
</Switch>
</div>
</div>
</BrowserRouter>
) : null
}
</div>
);