Nice animation for logo link

assets/icons/back.svg

@@ -1,10 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 30 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="Combined-Shape" d="M4.012,11.427l24.704,0c0.626,0 1.134,-0.508 1.134,-1.134c0,-0.626 -0.508,-1.133 -1.134,-1.133l-24.987,0l7.224,-7.225c0.443,-0.442 0.443,-1.16 0,-1.603c-0.443,-0.443 -1.16,-0.443 -1.603,0l-9.018,9.018c-0.404,0.404 -0.439,1.037 -0.106,1.481c0.099,0.182 0.245,0.335 0.423,0.439l8.701,8.701c0.443,0.443 1.16,0.443 1.603,0c0.443,-0.443 0.443,-1.16 0,-1.603l-6.941,-6.941Z" style="fill:#fff;"/></svg>
-<svg width="30px" height="21px" viewBox="0 0 30 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>Combined Shape</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M4.0121205,11.4268265 L28.7159803,11.4268265 C29.3420609,11.4268265 29.8495995,10.9192879 29.8495995,10.2932072 C29.8495995,9.66712664 29.3420609,9.15958803 28.7159803,9.15958803 L3.72871569,9.15958803 L10.9530947,1.93520905 C11.3958005,1.49250321 11.3958005,0.774735221 10.9530947,0.332029381 C10.5103888,-0.11067646 9.79262085,-0.11067646 9.34991501,0.332029381 L0.332029381,9.34991501 C-0.0720094163,9.75395381 -0.107299183,10.3871039 0.22616008,10.831165 C0.324565179,11.0133559 0.471399155,11.1655433 0.649413844,11.2704791 L9.34991501,19.9709803 C9.79262085,20.4136861 10.5103888,20.4136861 10.9530947,19.9709803 C11.3958005,19.5282745 11.3958005,18.8105065 10.9530947,18.3678006 L4.0121205,11.4268265 Z" id="Combined-Shape" fill="#F79223"></path>
-    </g>
-</svg>

js/components/Footer.js

@@ -9,7 +9,7 @@ export default function Footer({ items, pageName }) {
 
   return (
     <Branding
-      logoContent={<img src="/assets/logo.svg"/>}
+      logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
     >
       <span className="footnote">
         AOE is a leading provider of Enterprise Open Source web solutions.

js/components/Header.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import Branding from './Branding';
 import Link from './Link';
+import LogoLink from './LogoLink';
+import { getItemPageNames } from '../../common/config';
+
+export default function Header({ pageName }) {
+
+  const smallLogo = pageName !== 'index';
 
-export default function Header() {
   return (
     <Branding
-      logoContent={<Link pageName="index"><img src="/assets/logo.svg"/></Link>}
+      logoContent={<LogoLink small={smallLogo} />}
     >
       <div className="nav">
         <div className="nav__item">

js/components/LogoLink.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import Link from './Link';
+
+export default function LogoLink({ small=false }) {
+  return (
+    <Link pageName="index" className={classNames('logo-link', { 'logo-link--small': small })}>
+      <span className="logo-link__icon icon icon--back"></span>
+      <span className="logo-link__slide">
+        <img className="logo-link__img" src="/assets/logo.svg" width="150px" height="60px" />
+        <span className="logo-link__text">
+          Technology Radar
+        </span>
+      </span>
+    </Link>
+  );
+}

styles/components/branding.css

@@ -12,9 +12,7 @@
   &__logo {
     flex: 0 0 200px;
     & img {
-      display: block;
+      display: inline-block;
-      width: 150px;
-      height: 60px;
     }
   }
 

styles/components/logo-link.css

@@ -0,0 +1,63 @@
+.logo-link {
+  display: inline-block;
+  transition: 200ms all ease-out;
+  width: 400px;
+  color: var(--color-white);
+  text-decoration: none;
+  position: relative;
+
+  &__slide {
+    transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
+    display: block;
+    position: relative;
+  }
+
+  &__icon {
+    transition: 400ms opacity ease-out;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+
+  &__img {
+    transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
+  }
+
+  &__text {
+    transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
+    position: absolute;
+    top: 50%;
+    left: 130px;
+    white-space: nowrap;
+    font-size: 18px;
+    line-height: 1;
+    margin-top: -1px;
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+
+  &--small {
+    .logo-link__img {
+      transform: scale(0.55);
+    }
+
+    .logo-link__text {
+      opacity: 0.8;
+    }
+
+    .logo-link__slide {
+      transform: translateX(-32px);
+    }
+
+    &:hover {
+      .logo-link__icon {
+        opacity: 1;
+      }
+
+      .logo-link__slide {
+        transform: translateX(0);
+      }
+    }
+  }
+}

tasks/watch.js

@@ -33,6 +33,7 @@ runBuild('all');
 
 watch(stylesPath(), options, watchBuild('css'));
 watch(jsPath(), options, watchBuild('js'));
+watch(jsPath(), options, watchBuild('pages'));
 watch(assetsPath(), options, watchBuild('assets'));
 watch(radarPath(), options, watchBuild('pages'));