From 6b26ed9c8644cd1675c8df61ba9437a9509550d5 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sat, 20 Apr 2019 22:20:29 +0100
Subject: [PATCH] Sticky navbar (#569)

* collapse toggler on click

* sticky navbar
---
 app/components/header/Header.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/components/header/Header.js b/app/components/header/Header.js
index 716530b3..bbd75f29 100644
--- a/app/components/header/Header.js
+++ b/app/components/header/Header.js
@@ -27,6 +27,7 @@ export default class Header extends Component<Props, State> {
   props: Props;
 
   state: State = {
+    collapsed: true,
     searchQuery: ''
   };
 
@@ -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