Skip to content

Commit

Permalink
Sticky navbar (#569)
Browse files Browse the repository at this point in the history
* collapse toggler on click

* sticky navbar
  • Loading branch information
pedroabreu authored and amilajack committed Apr 20, 2019
1 parent cd54654 commit 6b26ed9
Showing 1 changed file with 15 additions and 6 deletions.
21 changes: 15 additions & 6 deletions app/components/header/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default class Header extends Component<Props, State> {
props: Props;

state: State = {
collapsed: true,
searchQuery: ''
};

Expand All @@ -51,24 +52,32 @@ export default class Header extends Component<Props, State> {
}
};

setCollapse = () => {
this.setState(prevState => ({
collapsed: !prevState.collapsed
}));
};

render(): Node {
const { activeMode, setActiveMode } = this.props;
const { searchQuery } = this.state;
const { collapsed, searchQuery } = this.state;

return (
<Navbar className="navbar navbar-expand-lg navbar-dark bg-dark col-sm-12 col-md-12">
<Navbar
className="navbar navbar-expand-lg navbar-dark bg-dark col-sm-12 col-md-12"
sticky="top"
>
<NavbarToggler
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-expanded={!collapsed}
aria-label="Toggle navigation"
onClick={this.setCollapse}
/>
<Collapse
className="collapse navbar-collapse"
id="navbarSupportedContent"
isOpen={!collapsed}
>
<Nav className="navbar-nav mr-auto">
<NavItem
Expand Down

0 comments on commit 6b26ed9

Please sign in to comment.