Reactstrap - collapse Navbar on NavLink click only on mobile

Question

I have a Navbar that is open on desktop and collapsed on mobile. I can click a NavbarToggler on mobile to open the Navbar. When I click a NavLink on mobile I want the Navbar to collapse again. I added a onclick() toggle function for the NavLink which works fine on mobile, but now the Navbar on Desktop will collapse and immediately after open again whenever I click a Navlink. Is there a way to always have the Navbar open on Desktop and have it collapse on clicking a NavLink on mobile?

const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); toggle()}}>Home</NavLink>
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

score 1 · Accepted Answer · answered Sep 13 '20 at 20:30

There are a few ways that this can be accomplished in javascript. You can evaluate the userAgent to check what device the user is using or you can use the viewport / document dimensions as a condition for whether the toggle will fire.

For example:


const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

const mobileToggle = () => {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   setIsOpen(!isOpen);
  };
};

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); mobileToggle()}}>Home</NavLink>            {/* <---- change this to mobileToggle too*/}
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

Reactstrap - collapse Navbar on NavLink click only on mobile

1 Answers1