How to Remove Active Background in React-Bootstrap

1
votes

How can I remove the active Nav Item background feature in react-bootstrap when selecting Nav Item? It acting abnormally when I use it with 'react-redux' and 'react-router-bootstrap'?

For instance, when I reload the home page, the active background only stays on one of the Nav Items even if I select other Nav Items. Below is the image of the navitem (Dashboard) item is selected and the code for the navbar! Any recommendations would be greatly appreciate!

Nav Bar

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {LinkContainer, IndexLinkContainer} from 'react-router-bootstrap';

import {
  Nav,
  NavItem,
  Navbar
} from 'react-bootstrap';

class NavBar extends Component {

  render() {
    const {authenticated} = this.props;
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="/">Timesheet App</a>
          </Navbar.Brand>
          <Navbar.Toggle/>
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav>
            <IndexLinkContainer to="/">
              <NavItem className="nav-link" eventKey={1}>Dashboard</NavItem>
            </IndexLinkContainer>
            <LinkContainer to="/timesheet/new">
              <NavItem className="nav-link" eventKey={2}>Submit Time</NavItem>
            </LinkContainer>
            <LinkContainer to="/user/Andriy">
              <NavItem className="nav-link" eventKey={3}>Andriy Time</NavItem>
            </LinkContainer>
            {authenticated &&
              <LinkContainer to="/signout">
                <NavItem className="nav-link" eventKey={4}>Sign Out</NavItem>
              </LinkContainer>}
            {!authenticated &&
              <LinkContainer to="/signin">
                <NavItem className="nav-link" eventKey={5}>Sign In</NavItem>
              </LinkContainer>}
            {!authenticated &&
              <LinkContainer to="/signup">
                <NavItem className="nav-link">Sign Up</NavItem>
              </LinkContainer>}
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

NavBar.propTypes = {
  authenticated: PropTypes.bool
};

function mapStateToProps(state) {
  return {
    authenticated: state.auth.authenticated
  };
}

export default connect(mapStateToProps)(NavBar);
3
reactjsreduxreact-routerreact-reduxreact-bootstrap

3 Answers

0
votes

If you want the active background gone, this can just be a CSS-only fix.

Just override the CSS for the active state background/border/etc to be the same as the non-active state.

Hope this helps.

0
votes

You should create a class as a variable and use classNames to changed it based on whatever logic you decide to use.

You can then define something in CSS to deal with remove the active background.

For example (taken from the docs): 

var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return <button className={btnClass}>{this.props.label}</button>;

You can use different states to dictate what classes should be added and removed. This also helps with DRY principles as it will prevent you having to repeat yourself across all of the Navbar.

0
votes

If you set activeKey="", then none of the links are active, and it's only the active key which gets a background.

<Nav activeKey="">
...
</Nav>