Reputation: 1699
I'm using Gatsby.js to build a site. It works very similarly to React.js.
I have a side menu. I would like the icons on this menu to be highlighted when the user is on the respective page. Gatsby has an 'activeStyle' option but this is not working for me. The icon still remains white when I am on the respective page.
My gatsby code using activeStyle looks like this:
<div class="sidebar_button">
<Link to="/about">
<i>
<FiUser size={22} activeStyle={{ color: "blue" }} />
</i>
<p>ABOUT</p>
</Link>
</div>
'FiUser' is the name of the icon I am using (with react-icons).
If I change 'activeStyle' to just 'style', the icon does change to blue - just not with 'activeStyle'.
I was wondering if anyone could point me in the right direction as to whats going wrong?
Upvotes: 0
Views: 1277
Reputation: 1699
Using Boy With Silver Wings answer with some modifications, I found what worked for me was:
<div class="sidebar_button">
<Link to="/" activeClassName="user-link">
<i>
<TiHomeOutline size={22} className="user-icon" />
</i>
<p className="user-text">HOME</p>
</Link>
</div>
And for my CSS:
.user-icon {
color: #d8d8d8;
}
.user-text {
color: #d8d8d8;
}
.user-link .user-icon {
color: #97b27b;
}
.user-link .user-text {
color: #97b27b;
}
This generates exactly what I was looking for. I hope this can help someone else.
E.g when on the about/ 'silhouette' page it looks like this:
Upvotes: 0
Reputation: 19234
activeStyle
and activeClassName
are supposed to be used on the Link
component itself, not on it's children.
<div class="sidebar_button">
<Link to="/about" activeClassName="active-link">
<i>
<FiUser size={22} className="user-icon" />
</i>
<p>ABOUT</p>
</Link>
</div>
The i
and FiUser
should not have any attributes that would override this style.
On styling:
.user-link {
color: blue;
}
.active .user-link {
color: white;
}
Upvotes: 1