Gatsbyjs - collapsing navbar with reactstrap - reactjs

Question

I'm working on a site I've build with Gatsby.js, and reactstrap for the ui components. But I have an problem with the collapsed navbar on smaller screens.
I need to collapse the navigation after each click to make it work with gatsby-link, but the collapse is not collapsed after a new page is loaded.
So I added a closeNavbar method to all links via onClick, but for whatever reasons this does not work.
Here is my navigation component:
import React from "react";
import Link from "gatsby-link";
import {
Collapse,
Container,
Navbar,
NavbarToggler,
Nav,
NavItem
} from "reactstrap";
export default class Navigation extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.closeNavbar = this.closeNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
closeNavbar() {
if (this.state.collapsed == true) {
this.toggleNavbar();
}
}
render() {
return (
<header>
<Navbar className="navigation__navbar" light expand="md">
<Container>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<Link className="nav-link navigation__navlinks" to="/">
Home
</Link>
</NavItem>
<NavItem>
<Link
onClick={this.closeNavbar}
className="nav-link navigation__navlinks"
to="/leistungen/"
>
Leistungen
</Link>
</NavItem>
<NavItem>
<Link
onClick={this.closeNavbar}
className="nav-link navigation__navlinks"
to="/kuechen/"
>
Küchen
</Link>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
</header>
);
}
}

Answer 1

I had an error in the closeNavbar method. I tried to toggle it, only when it was already collapsed. This is the correct code:
closeNavbar() {
if (this.state.collapsed !== true) {
this.toggleNavbar();
}
}