Improve nav layout

css/icon.css

@@ -19,6 +19,11 @@
   width: 48px;
 }
 
+.icon--extra-large {
+  height: 72px;
+  width: 72px;
+}
+
 .icon--facebook {
   color: var(--color-facebook);
 }

css/nav.css

@@ -37,6 +37,7 @@
   transform: translateX(-100%);
   transition: transform var(--nav-transition-duration) ease-out;
   z-index: 10;
+  overflow-y: auto;
 }
 
 .logged-in .nav__content {
@@ -49,14 +50,32 @@
   margin-right: 62px;
 }
 
+.nav__title-link {
+  display: block;
+  position: relative;
+}
+
 .nav__title-link,
-.nav__title-link:active,
-.nav__title-link:focus,
 .nav__title-link:hover,
+.nav__title-link:focus,
 .nav__title-link:visited {
   color: #fff;
 }
 
+.nav__title-link-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 72px;
+  height: 72px;
+  opacity: 0;
+  transition: opacity var(--nav-transition-duration) ease-out;
+}
+
+.nav__title-link:hover .nav__title-link-image {
+  opacity: 1;
+}
+
 .nav__close {
   background-color: transparent;
   border: none;
@@ -67,15 +86,19 @@
   position: absolute;
   right: 15px;
   top: 15px;
-  transition: filter var(--nav-transition-duration) ease-out;
+  transition:
+    box-shadow var(--nav-transition-duration) ease-out,
+    filter var(--nav-transition-duration) ease-out;
   width: 32px;
 }
 
-.nav__close:active,
+.nav__close:focus {
-.nav__close:focus,
+  box-shadow: 0 3px 0 0 #fff;
+  outline: 0;
+}
+
 .nav__close:hover {
   filter: drop-shadow(0 0 2px #fff);
-  outline: 0;
 }
 
 .nav__close-bar {
@@ -103,11 +126,10 @@
   flex-grow: 1;
   font-family: var(--heading-font-family);
   font-size: 1.5rem;
-  margin: var(--spaceMd) 0 0 var(--space-md);
 }
 
 .nav__list--sub-list {
-  margin-top: 0;
+  margin: 0 0 0 var(--space-sm);
 }
 
 .nav__link,
@@ -117,21 +139,26 @@
 .nav__link:visited {
   color: #fff;
   display: inline-block;
-  margin-bottom: var(--space-sm);
+  margin-bottom: var(--space-xs);
-  transition: text-shadow var(--nav-transition-duration) ease-out;
+  transition:
+    box-shadow var(--nav-transition-duration) ease-out,
+    text-shadow var(--nav-transition-duration) ease-out;
 }
 
-.nav__link:focus,
 .nav__link:hover {
   text-shadow: 0 0 2px #fff;
 }
 
+.nav__link:focus {
+  box-shadow: 0 3px 0 0 #fff;
+}
+
 /**
  * nav Social
  */
 
 .nav__social {
-  margin-bottom: var(--spaceSm);
+  margin-bottom: var(--space-xs);
 }
 
 .nav__social-link,
@@ -141,10 +168,15 @@
 .nav__social-link:visited {
   display: inline-block;
   color: #fff;
-  transition: filter var(--nav-transition-duration) ease-out;
+  transition:
+    box-shadow var(--nav-transition-duration) ease-out,
+    filter var(--nav-transition-duration) ease-out;
+}
+
+.nav__social-link:focus {
+  box-shadow: 0 3px 0 0 #fff;
 }
 
-.nav__social-link:focus,
 .nav__social-link:hover {
   filter: drop-shadow(0 0 2px #fff);
 }

css/search.css

@@ -13,7 +13,7 @@
   border-radius: 0;
   color: var(--color-near-black);
   font-family: var(--heading-font-family);
-  max-width: 200px;
+  max-width: 150px;
   padding: 10px;
 }
 

js/image.js

@@ -1,6 +1,7 @@
 export default class Image {
   constructor(image) {
     this.image = image;
+    this.dataset = image.dataset;
   }
 
   fadeIn() {
@@ -8,6 +9,9 @@ export default class Image {
   }
 
   start() {
+    if (this.dataset.loadTransition === 'false') {
+      return;
+    }
     this.image.style.opacity = 0;
     if (this.image.complete) {
       this.fadeIn();

js/image.spec.js

@@ -1,13 +1,18 @@
 import Image from './image';
 
-const imageHtml = '<img src="foo.jpg"></img>';
+const imageHtml = `
+<img class="image" src="foo.jpg"></img>
+<img class="disabled-image" data-load-transition="false" src="foo.jpg"></img>
+`;
 
 describe('Image', () => {
   let image;
+  let disabledImage;
 
   beforeEach(() => {
     document.body.innerHTML = imageHtml;
-    image = document.querySelector('img');
+    image = document.querySelector('.image');
+    disabledImage = document.querySelector('.disabled-image');
   });
 
   it('Should initialize', () => {
@@ -53,5 +58,12 @@ describe('Image', () => {
     img.start();
     expect(img.attachLoadedEvent).toHaveBeenCalledTimes(1);
   });
+
+  test('start should do nothing if data-load-transition=false', () => {
+    const img = new Image(disabledImage);
+    img.attachLoadedEvent = jest.fn();
+    img.start();
+    expect(img.attachLoadedEvent).toHaveBeenCalledTimes(0);
+  });
 });
 

theme/partials/navigation.php

@@ -7,8 +7,13 @@
   </button>
   <div class="nav__content">
     <h2 class="nav__title">
-      <a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Navigation title" tabindex="-1">
+      <a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Back Home" tabindex="-1">
-        <?php bloginfo('name') ?>
+        <span class="nav__title-link-icon">
+          <svg class="icon icon--extra-large">
+            <use xlink:href="#icon-windy"></use>
+          </svg>
+        </span>
+        <img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="nav__title-link-image" data-load-transition="false">
       </a>
     </h2>
     <ul class="nav__list" role="menubar">