CODEWITHSUNDEEP
reactjsreduxreact-routerreact-reduxreact-bootstrap
andre
andre

Reputation: 1680

How to Remove Active Background in React-Bootstrap

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

Upvotes: 1

Views: 2221

Answers (3)

Sam
Sam

Reputation: 2341

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>

Upvotes: 1

Dandy
Dandy

Reputation: 1481

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.

Upvotes: 0

link
link

Reputation: 2510

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.

Upvotes: -1

Related Questions