if statement in SCSS on element with attribute equals to true? - css

Question

In the first div block in the navbar I want to do an if statement to say:
if (aria-expanded === true) {
height = calc(100vh - 75px)
}
else {
height = 90%
}
<nav className="navbar navbar-expand-xl navbar-side" aria-label="Side Navigation" >
<div className={`navbar-toggler ${this.state.notification ? 'has-notification' : ''}`} data-toggle="collapse" data-target="#sidebarCollapse" aria-controls="sidebarCollapse" aria-expanded="false" aria-label="Toggle side navigation">
Menu
</div>
<div className="collapse navbar-collapse" id="sidebarCollapse">
<ul className="navbar-nav mr-auto">
<li className="nav-user">
<div className="profile-pic">
<i className="fa fa-lg fa-user mt-1" />
</div>
<i><span>{this.state.authenticatedUser.first_name} {this.state.authenticatedUser.last_name}</span><br />{this.state.authenticatedUser.job_title}</i>
</li>
<NavBar authenticatedUser={this.state.authenticatedUser} activeScreen={this.state.activeScreen} setActiveScreen={this.setActiveScreen} notification={this.state.notification} />
</ul>
</div>
</nav>
Some of the scss for the sidebar is:
.navbar-side {
position: relative;
padding: 0;
display: block;
height: calc(100vh - 75px);
overflow-y: scroll;
width: 100%;
.navbar {
padding: 0;
}
.navbar-nav {
width: 100%;
flex-direction: column;
padding-bottom: 50px;

Answer 1

Use attribute selector:
[aria-expanded=true] {
height: calc(100vh - 75px)
}
[aria-expanded=false] {
height: 90%
}
Example:
[aria-expanded=true] {
color:red;
}
[aria-expanded=false] {
color:blue;
}
<div aria-expanded="true">True</div>
<div aria-expanded="false">False</div>

Answer 2

This is a CSS issue and not SCSS. You can use plain-old attribute selector:
div[aria-expanded='true']{
color:green;
}
<div aria-expanded='true'>has <em>aria-expanded</em> which equals "true"</div>
<div aria-expanded='false'>has <em>aria-expanded</em> which equals "false"</div>
<div>does not have <em>aria-expanded</em> attribute</div>