CODEWITHSUNDEEP
javascripthtmlcssreactjsgatsby
Toms Code
Toms Code

Reputation: 1699

Highlight menu icon when on that page using React/ Gatsby?

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?

side menu

Upvotes: 0

Views: 1277

Answers (2)

Toms Code
Toms Code

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:

enter image description here

Upvotes: 0

Agney
Agney

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;
}

Docs

Upvotes: 1

Related Questions