#100 - Added floating link bar

.env.example

@@ -1,4 +1,3 @@
 REACT_APP_GOOGLE_TAG_MANAGER_CONTAINER_ID=GTM-XXXXXX
 
 NODE_PATH=src/
-

package.json

@@ -18,6 +18,9 @@
         "swagger-ui": "^3.18.2"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.17",
+        "@fortawesome/free-brands-svg-icons": "^5.8.1",
+        "@fortawesome/react-fontawesome": "^0.1.4",
         "cookieconsent": "^3.1.0",
         "node-sass-chokidar": "^1.3.4",
         "react-scripts": "^2.1.8"
@@ -28,4 +31,4 @@
         "not ie <= 11",
         "not op_mini all"
     ]
-}
+}

src/plugins/BunqLayoutPlugin/BunqLayoutPlugin.js

@@ -1,5 +1,7 @@
 // @flow
 import BunqLayout from "plugins/BunqLayoutPlugin/components/BunqLayout/BunqLayout";
+import Floater from "plugins/BunqLayoutPlugin/components/Floater/Floater";
+import FloaterItem from "plugins/BunqLayoutPlugin/components/FloaterItem/FloaterItem";
 import Sidebar from "plugins/BunqLayoutPlugin/components/Sidebar/Sidebar";
 import SidebarItem from "plugins/BunqLayoutPlugin/components/SidebarItem/SidebarItem";
 
@@ -139,6 +141,8 @@ const BunqLayoutPlugin = (): Object => {
     return {
         components: {
             BunqLayout: BunqLayout,
+            Floater: Floater,
+            FloaterItem: FloaterItem,
             Sidebar: Sidebar,
             SidebarItem: SidebarItem
         },

src/plugins/BunqLayoutPlugin/components/BunqLayout/BunqLayout.js

@@ -15,7 +15,7 @@ class BunqLayout extends React.Component {
         return (
             <div className="doc-wrapper">
                 {
-                    this.renderSidebar()
+                    this.renderAllElementAfterInitialization()
                 }
                 <BaseLayout />
             </div>
@@ -25,13 +25,20 @@ class BunqLayout extends React.Component {
     /**
      * @returns {Node}
      */
-    renderSidebar (): Node {
+    renderAllElementAfterInitialization (): Node {
         const { getComponent } = this.props;
-        const Sidebar = getComponent("Sidebar", true);
         const loadingStatus = this.props.specSelectors.loadingStatus();
 
+        const Sidebar = getComponent("Sidebar", true);
+        const Floater = getComponent("Floater", true);
+
         if ("success" === loadingStatus) {
-            return <Sidebar {...this.props} />;
+            return (
+                <div>
+                    <Sidebar {...this.props} />
+                    <Floater {...this.props} />
+                </div>
+            );
         } else {
             return null;
         }

src/plugins/BunqLayoutPlugin/components/Floater/Floater.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { library, dom } from "@fortawesome/fontawesome-svg-core";
+import {
+    faGithub,
+    faStackOverflow
+} from "@fortawesome/free-brands-svg-icons";
+
+import { iconTogether } from "helpers/bunqIcons";
+
+/**
+ * @author Nicola Parrello <[email protected]>
+ * @since  20190402 Initial creation.
+ */
+class Floater extends React.Component {
+    /**
+     * @type {Object[]}
+     */
+    static allResource = [
+        {
+            destination: "https://github.com/bunq",
+            name: "GitHub",
+            icon: "github"
+        },
+        {
+            destination: "https://stackoverflow.com/search?q=bunq",
+            name: "Stack Overflow",
+            icon: "stack-overflow"
+        },
+        {
+            destination: "https://together.bunq.com/t/api",
+            name: "bunq Together",
+            icon: "together"
+        }
+    ];
+
+    /**
+     * @param {Object} props
+     */
+    constructor (props: Object) {
+        super(props);
+
+        library.add([
+            faGithub,
+            faStackOverflow,
+            iconTogether
+        ]);
+
+        dom.watch();
+    }
+
+    /**
+     * @returns {Node}
+     */
+    render (): Node {
+        const { getComponent } = this.props;
+        const FloaterItem = getComponent("FloaterItem", true);
+
+        return (
+            <div className="floater">
+                <div className="floater-list">
+                    {
+                        Floater.allResource.map((resource: Object, index: number): Element => {
+                            return (
+                                <FloaterItem key={ index } resource={ resource } />
+                            );
+                        })
+                    }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Floater;

src/plugins/BunqLayoutPlugin/components/FloaterItem/FloaterItem.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+/**
+ * @author Nicola Parrello <[email protected]>
+ * @since  20190403 Initial creation.
+ */
+class FloaterItem extends React.Component {
+    /**
+     * @param {Object} props
+     */
+    constructor (props: Object) {
+        super(props);
+
+        const { resource } = props;
+
+        this.state = {
+            destination: resource.destination,
+            name: resource.name,
+            icon: resource.icon
+        };
+    }
+
+    /**
+     * @returns {Node}
+     */
+    render (): Node {
+        return (
+            <div className={ "floater-item" }>
+                <a href={ this.state.destination } target={ "_blank" }>
+                    <FontAwesomeIcon
+                        icon={
+                            ["fab", this.state.icon]
+                        }
+                        title={ this.state.name }
+                        size={ "3x" }
+                    />
+                </a>
+            </div>
+        );
+    }
+}
+
+export default FloaterItem;

src/scss/_floater.scss

@@ -0,0 +1,47 @@
+@import "variables";
+
+$border-radius-floater: 8px;
+
+.floater {
+    position: fixed;
+    top: 25%;
+    right: 0;
+    display: none;
+    border-top-left-radius: $border-radius-floater;
+    border-bottom-left-radius: $border-radius-floater;
+    background-color: $color-grey-dark;
+
+    @media (min-width: $width-viewport-small) {
+        display: flex;
+    }
+
+    .floater-list {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 0;
+        margin: $spacer-small;
+        list-style: none;
+
+        .floater-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: $spacer-medium;
+
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+
+            a {
+                color: $color-white;
+                font-size: $font-size-sidebar-item;
+                text-decoration: none;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}

src/scss/_type.scss

@@ -1,5 +1,6 @@
 @import "variables";
 
+.floater,
 .sidebar,
 .swagger-ui {
     font-family: "Open Sans", sans-serif !important;
@@ -64,13 +65,22 @@
         }
     }
 
-    h1,
-    h2.title {
-        padding-top: $margin-top-h1;
+    h1 {
+        padding-top: $margin-top-h1 / 2;
+
+        @media (min-width: $width-viewport-small) {
+            padding-top: $margin-top-h1;
+        }
     }
 
     h2 {
         margin-top: $margin-top-h2;
+
+        &.title {
+            @media (min-width: $width-viewport-small) {
+                padding-top: $margin-top-h1;
+            }
+        }
     }
 
     h3 {

src/scss/index.scss

@@ -1,5 +1,6 @@
 @import "cookie-consent";
 @import "custom";
+@import "floater";
 @import "sidebar";
 @import "type";
 @import "variables";