Checking Routes for a Hover Animation in a Navigation Bar

I’m trying to make a navigation bar with a hover animation (animating a moving line). … Read more Checking Routes for a Hover Animation in a Navigation Bar

I’m trying to make a navigation bar with a hover animation (animating a moving line). I’ve currently got the animation working for the navigation bar, however, I want to make it so that the hover animation does not appear for the item in the navbar when the user is on the page of that item.

Is there a way for me to use NavLink to check if the route for the navbar item that the user is hovering over is the same as the one that they’re currently on, or is there perhaps a better way?

My code currently looks like this:

  displayNavBar(route) {
    return (
      <li
        className={
          this.state.navBar
            ? "nav-item active-nav-item"
            : "nav-item"
        }
        key={route}
      >
        {/* Highlights navbar if user is hovering on that page's nav button */}
        {this.state.navBar ? (
          <NavLink
            exact
            to={this.routes[route][0]}
            activeClassName="highlight-nav"
          >
            {this.routes[route][1]}
          </NavLink>
        ) : (
          <NavLink
            exact
            to={this.routes[route][0]}
            activeClassName="highlight-no-nav"
          >
            {this.routes[route][1]}
          </NavLink>
        )}
      </li>
    )
  }
                {Object.keys(this.routes).map((route, index) => {
                  return this.notDropdownItem(index) ? (
                    this.displayNavBar(route)
                  ) : (
                    <DropdownMenu
                      navbarState={this.state.navBar}
                      index={index}
                      route={route}
                      key={route}
                    />
                  );
                })}
.nav-item a:hover {
  color:  var(--red);
  padding: 15px;
  text-decoration: none;
}

.nav-item::after {
  content: '';
  position: absolute;
  display: block;
  height: 3px;
  width: 0%;
  bottom: 0;
  left: 5%;
  opacity: 0;
  background-color: var(--red);
  transition: opacity 300ms, width 0.35s ease 0s;
}

Thanks

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *