Added improvements using new components

config/webpack.config.dev.js

@@ -23,6 +23,27 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+const postCssLoader = {
+    loader: require.resolve('postcss-loader'),
+    options: {
+        // Necessary for external CSS imports to work
+        // https://github.com/facebookincubator/create-react-app/issues/2677
+        ident: 'postcss',
+        plugins: () => [
+            require('postcss-flexbugs-fixes'),
+            autoprefixer({
+                browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9', // React doesn't support IE8 anyway
+                ],
+                flexbox: 'no-2009',
+            }),
+        ],
+    },
+};
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -167,33 +188,14 @@ module.exports = {
                                     importLoaders: 1,
                                 },
                             },
-                            {
+                            postCssLoader,
-                                loader: require.resolve('postcss-loader'),
-                                options: {
-                                    // Necessary for external CSS imports to work
-                                    // https://github.com/facebookincubator/create-react-app/issues/2677
-                                    ident: 'postcss',
-                                    plugins: () => [
-                                        require('postcss-flexbugs-fixes'),
-                                        autoprefixer({
-                                            browsers: [
-                                                '>1%',
-                                                'last 4 versions',
-                                                'Firefox ESR',
-                                                'not ie < 9', // React doesn't support IE8 anyway
-                                            ],
-                                            flexbox: 'no-2009',
-                                        }),
-                                    ],
-                                },
-                            },
                         ],
                     },
                     {
                         test: /\.scss$/,
                         use: ExtractTextPlugin.extract({
                             fallback: 'style-loader',
-                            use: ['css-loader', 'sass-loader']
+                            use: ['css-loader', 'sass-loader', postCssLoader]
                         })
                     },
                     // "file" loader makes sure those assets get served by WebpackDevServer.
@@ -251,7 +253,7 @@ module.exports = {
         // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
         // You can remove this if you don't use Moment.js:
         new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-        new ExtractTextPlugin('main.[hash:8].css'),
+        new ExtractTextPlugin('main.css'),
     ],
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
+    "@fortawesome/react-fontawesome": "0.0.19",
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",

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">
+            <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
-                <NavbarBrand href="https://shlink.io" className="mr-auto">
+                <NavbarBrand href="https://shlink.io" target="_blank">
-                    <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
+                    <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 {
+.main-header.main-header {
-    background-color: $mainColor;
+    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;
+}