Added improvements using new components

src/common/MainHeader.js

@@ -1,15 +1,65 @@
+import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
+import {
+    Collapse, DropdownItem, DropdownMenu,
+    DropdownToggle,
+    Nav,
+    Navbar,
+    NavbarBrand,
+    NavbarToggler,
+    NavItem,
+    NavLink,
+    UncontrolledDropdown
+} from 'reactstrap';
 import './MainHeader.scss';
-import {Navbar, NavbarBrand} from 'reactstrap';
 import shlinkLogo from './shlink-logo-white.png';
 
 export default class MainHeader extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isOpen: false
+        };
+    }
+
+    toggle() {
+        this.setState({
+            isOpen: ! this.state.isOpen
+        });
+    }
+
     render() {
         return (
-            <Navbar light fixed="top" className="main-header">
-                <NavbarBrand href="https://shlink.io" className="mr-auto">
-                    <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
+            <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
+                <NavbarBrand href="https://shlink.io" target="_blank">
+                    <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
                 </NavbarBrand>
+                <NavbarToggler onClick={() => this.toggle()} />
+                <Collapse navbar isOpen={this.state.isOpen}>
+                    <Nav navbar>
+                        <NavItem>
+                            <NavLink href="#">
+                                <FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
+                            </NavLink>
+                        </NavItem>
+                        <UncontrolledDropdown nav>
+                            <DropdownToggle nav caret>
+                                Servers
+                            </DropdownToggle>
+
+                            <DropdownMenu right>
+                                <DropdownItem>
+                                    Server 1
+                                </DropdownItem>
+                                <DropdownItem>
+                                    Server 2
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </UncontrolledDropdown>
+                    </Nav>
+                </Collapse>
             </Navbar>
         );
     }

src/common/MainHeader.scss

@@ -1,7 +1,7 @@
 @import "../utils/base";
 
-.main-header {
-    background-color: $mainColor;
+.main-header.main-header {
+    background-color: $mainColor !important;
     color: white;
 
     .navbar-brand {

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './index.scss';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 

src/index.scss

@@ -0,0 +1,3 @@
+* {
+    outline: none !important;
+}