From a47d2170a7afbcd91508b05b1c30644afc739c59 Mon Sep 17 00:00:00 2001
From: Martin Cadoux <martin.cadoux@me.com>
Date: Wed, 7 Mar 2018 23:12:29 +0100
Subject: [PATCH] Add header links

---
 src/assets/images/icons/icon_english.svg |   1 +
 src/assets/images/icons/icon_rocket.svg  |   1 +
 src/assets/scss/includes/_header.scss    | 151 +++++++++++++----------
 src/containers/Header.jsx                |  60 +++++++--
 4 files changed, 138 insertions(+), 75 deletions(-)
 create mode 100644 src/assets/images/icons/icon_english.svg
 create mode 100644 src/assets/images/icons/icon_rocket.svg

diff --git a/src/assets/images/icons/icon_english.svg b/src/assets/images/icons/icon_english.svg
new file mode 100644
index 0000000..1c951d2
--- /dev/null
+++ b/src/assets/images/icons/icon_english.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640"><defs><clipPath id="a"><path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(80) scale(.94)"><g stroke-width="1pt"><path fill="#006" d="M-256 0H768.02v512.01H-256z"/><path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/><path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/><path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/icon_rocket.svg b/src/assets/images/icons/icon_rocket.svg
new file mode 100644
index 0000000..b66a5bd
--- /dev/null
+++ b/src/assets/images/icons/icon_rocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110"><defs id="defs3764"><style id="style3762">.cls-1{fill:#313535}</style></defs><path id="path3768" fill="#313535" d="M107 12.57C87.07 2.3 71.44 13.54 58.1 29.2c-3.2-.6-10.83-2.1-12.6-2.96l-14.4 16.5 5.76 2.43c3.3-4.6 10.7-9 14.9-8.1-3.05 4-6.05 8.17-8.92 12.16l9.02 10.5.17.17 9 10.5c4.36-2.22 8.88-4.52 13.33-6.95.15 4.32-5.27 10.86-10.24 13.46l1.5 6.02 18.48-11.7c-.6-1.87-.9-9.53-1-12.8 17.5-10.84 31-24.6 23.9-45.85zM96.5 32.94a8.67 8.67 0 1 1 .92-12.24 8.67 8.67 0 0 1-.9 12.27z" class="cls-1"/><path id="path3770" fill="#313535" d="M54.02 67c-.1-1.32-5.14-1.64-6.27-3.64-1.8-1.4-1.33-6.4-2.62-6.72-2.23-.53-5.5 1.56-13.4 8.65C23.82 72.37 1.3 96.97 1 103.47c6.48.68 34.22-17.85 42.4-24.58 8.2-6.72 10.8-9.63 10.62-11.9z" class="cls-1"/></svg>
\ No newline at end of file
diff --git a/src/assets/scss/includes/_header.scss b/src/assets/scss/includes/_header.scss
index db21e82..132a8cd 100644
--- a/src/assets/scss/includes/_header.scss
+++ b/src/assets/scss/includes/_header.scss
@@ -1,33 +1,43 @@
 .site-header {
-  align-items: center;
   background: $brand-color;
   border-bottom: 1px solid $border-color;
-  display: flex;
-  flex-flow: column wrap;
-  align-items: center;
-  width: 100%;
-  @media (min-width: 48em) {
-    flex-direction: row;
-    height: auto;
-    margin: 0;
-    width: 100%;
-  }
 
   &.-yellow {
     background-color: $brand-yellow;
   }
 
-  .branding {
-    display: inline-block;
-    margin-bottom: 5px;
-    height: 40px;
-    width: 120px;
-    @media (min-width: 48em) {
-      margin-bottom: 0;
-      height: 60px;
-      width: 160px;
+  &__content {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    width: 100%;
+    @media (min-width: em(768px)) {
+      flex-flow: row nowrap;
+      height: auto;
+      margin: 0 auto;
+      width: 100%;
     }
+  }
+
+  a {
+    color: $header-link-color;
+  }
+}
 
+.branding {
+  display: inline-block;
+  margin-bottom: em(5px);
+  height: em(40px);
+  width: em(120px);
+  @media (min-width: em(768px)) {
+    margin: 0 em(30px) 0 0;
+    height: em(60px);
+    width: em(160px);
+    max-width: em(255px);
+    flex: 1 1 em(200px);
+  }
+
+  &__content {
     &:hover {
       background: none;
       text-decoration: none;
@@ -39,54 +49,24 @@
       content: '';
       display: block;
       margin: 0 auto;
-      height: 40px;
-      width: 120px;
-      @media (min-width: 48em) {
+      height: em(40px);
+      width: em(120px);
+      @media (min-width: em(768px)) {
         margin: 0;
-        height: 60px;
-        width: 160px;
+        height: em(60px);
+        width: em(160px);
       }
     }
   }
+}
 
-  a {
-    color: $header-link-color;
-  }
-
-  .avatar {
-    border-radius: .2rem;
-    float: left;
-    height: 2rem;
-    margin-right: 1rem;
-    margin-top: -3px;
-    width: 2rem;
-  }
-
-  .site-nav {
-    ul {
-      display: inline-block;
-      line-height: 1.5;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      text-align: center;
-    }
-
-    li {
-      display: inline-block;
-      margin-right: .4rem;
-    }
-  }
-
-  .branding-container,
-  .search-bar,
-  .site-nav {
-    @media (min-width: 48em) {
-      flex: 1 1 12.5em;
-      max-width: 15.9375em;
-      margin: 0 1.875em 0 0;
-    }
-  }
+.avatar {
+  border-radius: .2rem;
+  float: left;
+  height: 2rem;
+  margin-right: 1rem;
+  margin-top: -3px;
+  width: 2rem;
 }
 
 .course-header {
@@ -94,10 +74,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  @media (min-width: 48em) {
+  @media (min-width: em(768px)) {
     flex-direction: row;
     align-items: baseline;
-    flex: 1 1 25em;
+    flex: 1 1 em(400px);
   }
 
   &__title {
@@ -105,7 +85,7 @@
 
     font-size: em($context);
     margin-bottom: em(20px, $context);
-    @media (min-width: 48em) {
+    @media (min-width: em(768px)) {
       margin-bottom: 0;
     }
   }
@@ -124,3 +104,42 @@
     }
   }
 }
+
+.links {
+  $margin: em(8px);
+
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: em(200px);
+  @media (min-width: em(768px)) {
+    margin: 0 0 0 em(30px);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+    list-style: none;
+    text-align: center;
+
+    &.-language:before {
+      content: "";
+      display: inline-block;
+      margin: 0 $margin;
+      width: em(1px);
+      height: em(24px);
+      background-color: $brand-black;
+      vertical-align: middle;
+    }
+  }
+
+  &__item {
+    & + & {
+      margin-left: $margin;
+    }
+  }
+}
diff --git a/src/containers/Header.jsx b/src/containers/Header.jsx
index a21cf5a..3b2917c 100644
--- a/src/containers/Header.jsx
+++ b/src/containers/Header.jsx
@@ -4,6 +4,8 @@ import { connect } from 'react-redux';
 import cx from 'classnames';
 
 import clock from '../assets/images/icons/icon_clock.svg';
+import rocket from '../assets/images/icons/icon_rocket.svg';
+import english from '../assets/images/icons/icon_english.svg';
 
 const mapStateToProps = ({
   currentCourse,
@@ -25,21 +27,61 @@ export class Header extends React.Component {
       currentCourse,
     } = this.props;
 
-    const headerClasses = cx('container site-header', {
+    const headerClasses = cx('site-header', {
       '-yellow': currentCourse.title,
     });
 
     return (
-      <nav className={headerClasses}>
-        <div className="branding-container">
-          <a href="/" className="branding" />
-        </div>
+      <header className={headerClasses}>
+        <div className="container site-header__content">
+          <div className="branding">
+            <a href="/" className="branding__content" />
+          </div>
+
+          <div className="course-header">
+            {currentCourse.title && <h2 className="course-header__title">{currentCourse.title}</h2>}
+            {currentCourse.time && <p className="course-header__duration" data-icon={clock}>{currentCourse.time} minutes</p>}
+          </div>
+
+          <div className="links">
+            <ul className="links__list -social">
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://blog.eleven-labs.com/feed.xml" title="Ajoutez-nous à votre veille" rel="nofollow noreferrer"><i className="fa fa-fw fa-rss"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://github.com/eleven-labs" title="Suivez-nous sur GitHub" rel="nofollow noreferrer"><i className="fa fa-fw fa-github"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://twitter.com/eleven_labs" title="Suivez-nous sur Twitter" rel="nofollow noreferrer"><i className="fa fa-fw fa-twitter"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://www.facebook.com/11Labs" title="Suivez-nous sur Facebook" rel="nofollow noreferrer"><i className="fa fa-fw fa-facebook"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://fr.linkedin.com/company/eleven-labs" title="Suivez-nous sur LinkedIn" rel="nofollow noreferrer"><i className="fa fa-fw fa-linkedin"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://eleven-labs.com" title="Découvrez Eleven Labs" rel="nofollow">
+                  <img className="corporate-logo" src={rocket} alt="Découvrez Eleven Labs" height="19"></img>
+                </a>
+              </li>
+            </ul>
 
-        <div className="course-header">
-          {currentCourse.title && <h2 className="course-header__title">{currentCourse.title}</h2>}
-          {currentCourse.time && <p className="course-header__duration" data-icon={clock}>{currentCourse.time} minutes</p>}
+         {/*<ul className="links__list -language">
+              <li className="links__item">
+                <a className="page-link no-link-style" href="/en" title="Switch to English">
+                  <img src={english} alt="Switch to English" title="Switch to English" width="18" height="12"></img>
+                </a>
+              </li>
+            </ul>*/}
+          </div>
         </div>
-      </nav>
+      </header>
     );
   }
 }