{"action":"closed","issue":{"url":"https://api.github.com/repos/dictyBase/reactTest/issues/8","labels_url":"https://api.github.com/repos/dictyBase/reactTest/issues/8/labels{/name}","comments_url":"https://api.github.com/repos/dictyBase/reactTest/issues/8/comments","events_url":"https://api.github.com/repos/dictyBase/reactTest/issues/8/events","html_url":"https://github.com/dictyBase/reactTest/issues/8","id":108218300,"number":8,"title":"Create responsive navbar","user":{"login":"haridusenadeera","id":12897928,"avatar_url":"https://avatars.githubusercontent.com/u/12897928?v=3","gravatar_id":"","url":"https://api.github.com/users/haridusenadeera","html_url":"https://github.com/haridusenadeera","followers_url":"https://api.github.com/users/haridusenadeera/followers","following_url":"https://api.github.com/users/haridusenadeera/following{/other_user}","gists_url":"https://api.github.com/users/haridusenadeera/gists{/gist_id}","starred_url":"https://api.github.com/users/haridusenadeera/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/haridusenadeera/subscriptions","organizations_url":"https://api.github.com/users/haridusenadeera/orgs","repos_url":"https://api.github.com/users/haridusenadeera/repos","events_url":"https://api.github.com/users/haridusenadeera/events{/privacy}","received_events_url":"https://api.github.com/users/haridusenadeera/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/dictyBase/reactTest/labels/in%20progress","name":"in progress","color":"fef2c0"},{"url":"https://api.github.com/repos/dictyBase/reactTest/labels/ReactJS","name":"ReactJS","color":"61DAFB"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-09-24T21:31:43Z","updated_at":"2015-10-01T20:58:58Z","closed_at":"2015-10-01T20:58:58Z","body":"## Components\r\n    <Navbar>\r\n        <NavbarHeader href=\"homepage.html\" name=\"Navbar Brand\"/>\r\n        <NavbarItems>\r\n            <Item link={\"#\"} title={About} />;\r\n            <Item link={\"#\"} title={Contact} />;\r\n            <NavbarDropdown name=\"Dropdown\">\r\n                <DropdownMenu menuItems={dropdownItems}/>\r\n            </NavbarDropdown>\r\n            <NavbarDropdown name=\"Dropdown\">\r\n                <DropdownMenu menuItems={dropdownItems}/>\r\n            </NavbarDropdown>\r\n        </NavbarItems>\r\n    </Navbar>\r\n\r\n### NavbarHeader Component\r\n    navbarToggle = () => {\r\n\r\n       // on click, the following styles must be set to <NavbarItems> component \r\n      //  to open the responsive view dropdown.\r\n\r\n       display: block;\r\n       overflow-y: auto;\r\n         @media (min-width: 768px) {\r\n           overflow-y: visible;\r\n         }\r\n    }\r\n\r\n    render () {\r\n      const defStyle = this.getStyles();\r\n      const {href, name, headerStyle, brandStyle} = this.props;\r\n\r\n      return {\r\n        <div key=\"header\" style= {[defStyle.header, headerStyle && headerStyle]}>\r\n          <span style= {[defStyle.pseudoBefore]} />\r\n              <button type=\"button\" style= {[defStyle.navbarToggle]} onClick= {this.navbarToggle}>\r\n                  <span style= {[defStyle.srOnly]}>Toggle navigation</span>\r\n                  <span style= {[defStyle.iconBar]}></span>\r\n                  <span style= {[defStyle.iconBar, defStyle.burger]}></span>\r\n                  <span style= {[defStyle.iconBar, defStyle.burger]}></span>\r\n              </button>\r\n              <a key=\"brand\" style= {[defStyle.brand, brandStyle && brandStyle]} href= {href}>\r\n                  {name}\r\n              </a>\r\n          <span style= {[defStyle.pseudoAfter]} />\r\n        </div>\r\n      };\r\n    }\r\n\r\nCommunication between siblings (`<NavbarHeader>` & `<NavbarItems>`) must be established to achieve the navbar responsive view. \r\n\r\n### NavbarItems Component\r\n    render() {\r\n      const defStyle = this.getStyles();\r\n      const {style} = this.props;\r\n\r\n      return (\r\n          <div ref =\"collapse\" style={[defStyle.collapse]}>\r\n              <span style={[defStyle.pseudoBefore]} />\r\n                  <ul ref=\"navitems\" style={[defStyle.base, style && style]}>\r\n                      <span style={[defStyle.pseudoBefore]} />\r\n                        {this.renderChildren()}\r\n                      <span style={[defStyle.pseudoAfter]} />\r\n                  </ul>\r\n              <span style={[defStyle.pseudoAfter]} />\r\n          </div>\r\n      );\r\n    }\r\n\r\nBelow is the default behavior of bootstrap navbar responsive view.\r\n\r\n![navbar](https://cloud.githubusercontent.com/assets/12897928/10084343/9e2eab84-62c8-11e5-943e-6c303a72d11c.gif)\r\n\r\n"}}