{"action":"opened","issue":{"url":"https://api.github.com/repos/reactstrap/reactstrap/issues/1142","repository_url":"https://api.github.com/repos/reactstrap/reactstrap","labels_url":"https://api.github.com/repos/reactstrap/reactstrap/issues/1142/labels{/name}","comments_url":"https://api.github.com/repos/reactstrap/reactstrap/issues/1142/comments","events_url":"https://api.github.com/repos/reactstrap/reactstrap/issues/1142/events","html_url":"https://github.com/reactstrap/reactstrap/issues/1142","id":344339823,"node_id":"MDU6SXNzdWUzNDQzMzk4MjM=","number":1142,"title":"How to collapse the Navbar collapsible after click?","user":{"login":"tbinte","id":908571,"node_id":"MDQ6VXNlcjkwODU3MQ==","avatar_url":"https://avatars3.githubusercontent.com/u/908571?v=4","gravatar_id":"","url":"https://api.github.com/users/tbinte","html_url":"https://github.com/tbinte","followers_url":"https://api.github.com/users/tbinte/followers","following_url":"https://api.github.com/users/tbinte/following{/other_user}","gists_url":"https://api.github.com/users/tbinte/gists{/gist_id}","starred_url":"https://api.github.com/users/tbinte/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tbinte/subscriptions","organizations_url":"https://api.github.com/users/tbinte/orgs","repos_url":"https://api.github.com/users/tbinte/repos","events_url":"https://api.github.com/users/tbinte/events{/privacy}","received_events_url":"https://api.github.com/users/tbinte/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-25T08:18:32Z","updated_at":"2018-07-25T08:18:32Z","closed_at":null,"author_association":"NONE","body":"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\r\n\r\nThe Collapse shows a nice responsive menu, phones get the hamburger button to expand it to a vertical menu list. But after clicking an item in that list, it does not collapse back to a hamburger button. This is required in Gatsby as clicking on the link does not trigger a page reload.\r\n\r\nI tried to put an onClick Event Handler to the links with an call to a method which collapses the navbar but this does not work.\r\n\r\nHere is my code for the component:\r\n\r\n    import React from \"react\";\r\n    import Link from \"gatsby-link\";\r\n    import {\r\n    Collapse,\r\n    Container,\r\n    Navbar,\r\n    NavbarToggler,\r\n    Nav,\r\n    NavItem\r\n    } from \"reactstrap\";\r\n\r\n    export default class Navigation extends React.Component {\r\n    constructor(props) {\r\n        super(props);\r\n\r\n        this.toggleNavbar = this.toggleNavbar.bind(this);\r\n        this.closeNavbar = this.closeNavbar.bind(this);\r\n        this.state = {\r\n        collapsed: true\r\n        };\r\n    }\r\n\r\n    toggleNavbar() {\r\n        this.setState({\r\n        collapsed: !this.state.collapsed\r\n        });\r\n    }\r\n\r\n    closeNavbar() {\r\n        if (this.state.collapsed == true) {\r\n        this.toggleNavbar();\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n        <header>\r\n            <Navbar className=\"navigation__navbar\" light expand=\"md\">\r\n            <Container>\r\n                <NavbarToggler onClick={this.toggleNavbar} className=\"mr-2\" />\r\n                <Collapse isOpen={!this.state.collapsed} navbar>\r\n                <Nav className=\"mr-auto\" navbar>\r\n                    <NavItem>\r\n                    <Link className=\"nav-link navigation__navlinks\" to=\"/\">\r\n                        Home\r\n                    </Link>\r\n                    </NavItem>\r\n                    <NavItem>\r\n                    <Link\r\n                        onClick={this.closeNavbar}\r\n                        className=\"nav-link navigation__navlinks\"\r\n                        to=\"/leistungen/\"\r\n                    >\r\n                        Leistungen\r\n                    </Link>\r\n                    </NavItem>\r\n                    <NavItem>\r\n                    <Link\r\n                        onClick={this.closeNavbar}\r\n                        className=\"nav-link navigation__navlinks\"\r\n                        to=\"/kuechen/\"\r\n                    >\r\n                        Küchen\r\n                    </Link>\r\n                    </NavItem>\r\n                </Nav>\r\n                </Collapse>\r\n            </Container>\r\n            </Navbar>\r\n        </header>\r\n        );\r\n    }\r\n    }\r\n\r\nHow to do this?"}}
{"actor":{"display_login":"tbinte"}}