Add Menu and Navigation

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 theme/style.css
+theme/bundle.js

css/grid.css

@@ -5,6 +5,7 @@
   grid-auto-flow: dense;
   grid-gap: var(--spaceSm);
   grid-template-columns: 1fr;
+  max-width: 1200px;
   margin: 0 var(--spaceSm);
 }
 

css/icon.css

@@ -11,6 +11,11 @@
   width: 24px;
 }
 
+.Icon--large {
+  height: 48px;
+  width: 48px;
+}
+
 .Icon--facebook {
   color: var(--colorFacebook);
 }

css/index.css

@@ -16,20 +16,24 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
 @import "article";
 @import "metadata";
 @import "footer";
+@import "menu";
+@import "nav";
+@import "search";
 @import "icon";
 
 :root {
-  --colorPrimaryBlue: #201f42;
   --colorNearBlack: #333;
+  --colorDarkBlue: #201f42;
+  --colorLightBlue: #1b8eff;
   --colorGrey: #828282;
   --colorLightGrey: #e0e0e0;
   --colorFacebook: #3e5a98;
   --colorTwitter: #1da1f2;
-  --colorLightBlue: #1b8eff;
   --spaceSm: 10px;
   --spaceMd: 30px;
   --spaceLg: 60px;
   --transitionMd: 300ms;
+  --transitionSl: 600ms;
   --headingFontFamily: 'Raleway', sans-serif;
   --bodyFontFamily: 'Open Sans', sans-serif;
 }

css/menu.css

@@ -0,0 +1,75 @@
+/** @define Menu */
+
+.Menu {
+  background-color: var(--colorDarkBlue);
+  border-radius: 999px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  display: block;
+  height: 64px;
+  left: 5px;
+  position: fixed;
+  top: 5px;
+  transform: translateX(-100px);
+  transition:
+    filter var(--transitionMd) ease-out,
+    opacity var(--transitionMd) ease-out,
+    transform var(--transitionMd) ease-out;
+  width: 64px;
+  will-change: opacity, transition;
+  z-index: 5;
+}
+
+.Menu-line {
+  background-color: #fff;
+  border-radius: 2px;
+  height: 4px;
+  left: 15px;
+  position: absolute;
+  right: 15px;
+  transform: translateY(-50%);
+}
+
+.Menu-line:nth-of-type(1) {
+  top: 33%;
+}
+
+.Menu-line:nth-of-type(2) {
+  top: 50%;
+}
+
+.Menu-line:nth-of-type(3) {
+  top: 66%;
+}
+
+.Menu-text {
+  left: -10000px;
+  position: absolute;
+  top: -10000px;
+}
+
+.Menu--visible {
+  transform: translateX(0);
+}
+
+.Menu--minimized {
+  opacity: 0.5;
+  transform: translateX(-20px) translateY(-20px);
+}
+
+/**
+ * Focus state
+ */
+
+.Menu:focus {
+  outline: none;
+}
+
+/**
+ * Hover state
+ */
+
+.Menu:hover {
+  opacity: 1;
+  filter: brightness(125%);
+}

css/nav.css

@@ -0,0 +1,144 @@
+/** @define Nav */
+
+:root {
+  --Nav-transitionDuration: var(--transitionMd);
+}
+
+.Nav::after {
+  background-color: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  transition:
+    opacity var(--Nav-transitionDuration) ease-out,
+    visibility var(--Nav-transitionDuration) ease-out;
+  top: 0;
+  visibility: hidden;
+  z-index: 5;
+}
+
+.Nav-content {
+  background-color: var(--colorDarkBlue);
+  bottom: 0;
+  box-shadow: 6px 0 4px rgba(0, 0, 0, 0.25);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  padding: var(--spaceSm);
+  position: fixed;
+  top: 0;
+  transform: translateX(-100%);
+  transition: transform var(--Nav-transitionDuration) ease-out;
+  z-index: 10;
+}
+
+.Nav-title {
+  font-family: var(--headingFontFamily);
+  font-size: 2.5rem;
+  margin-right: 62px;
+}
+
+.Nav-close {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: block;
+  height: 32px;
+  padding: 0;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  width: 32px;
+}
+
+.Nav-closeBar {
+  background-color: #fff;
+  border-radius: 2px;
+  height: 4px;
+  left: 4px;
+  position: absolute;
+  transition: transform var(--Nav-transitionDuration) ease-out var(--Nav-transitionDuration);
+  top: 14px;
+  width: 24px;
+}
+
+.Nav-closeText {
+  left: -10000px;
+  position: absolute;
+  top: -10000px;
+}
+
+/**
+ * Nav List
+ */
+
+.Nav-list {
+  flex-grow: 1;
+  font-family: var(--headingFontFamily);
+  font-size: 1.5rem;
+  margin: var(--spaceMd) 0 0 var(--spaceMd);
+}
+
+.Nav--subList {
+  margin-top: 0;
+}
+
+.Nav--open::after {
+  visibility: visible;
+  opacity: 1;
+}
+
+.Nav-link,
+.Nav-link:active,
+.Nav-link:focus,
+.Nav-link:hover,
+.Nav-link:visited {
+  color: #fff;
+  display: inline-block;
+  margin-bottom: var(--spaceSm);
+  transition: text-shadow var(--Nav-transitionDuration) ease-out;
+}
+
+.Nav-link:focus,
+.Nav-link:hover {
+  text-shadow: 0 0 2px #fff;
+}
+
+/**
+ * Nav Social
+ */
+
+.Nav-social {
+  margin-bottom: var(--spaceSm);
+}
+
+.Nav-socialLink,
+.Nav-socialLink:active,
+.Nav-socialLink:focus,
+.Nav-socialLink:hover,
+.Nav-socialLink:visited {
+  color: #fff;
+  transition: filter var(--Nav-transitionDuration) ease-out;
+}
+
+.Nav-socialLink:focus,
+.Nav-socialLink:hover {
+  filter: drop-shadow(0 0 2px #fff);
+}
+
+.Nav--open .Nav-content {
+  transform: translateX(0);
+}
+
+.Nav--open .Nav-closeBar:nth-of-type(1) {
+  transform: rotate(45deg);
+}
+
+.Nav--open .Nav-closeBar:nth-of-type(2) {
+  transform: rotate(-45deg);
+}
+

css/search.css

@@ -0,0 +1,28 @@
+/** @define Search */
+
+.Search {
+  display: flex;
+}
+
+.Search-label {
+  left: -10000px;
+  position: absolute;
+  top: -10000px;
+}
+
+.Search-input {
+  border: none;
+  border-radius: 0;
+  color: var(--colorNearBlack);
+  font-family: var(--headingFontFamily);
+  max-width: 200px;
+  padding: 10px;
+}
+
+.Search-submit {
+  background-color: var(--colorLightBlue);
+  border: none;
+  color: #fff;
+  font-family: var(--headingFontFamily);
+  min-width: 100px;
+}

js/index.js

@@ -0,0 +1,12 @@
+import Menu from './menu';
+import Nav from './nav';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const menu = new Menu({
+    el: document.querySelector('.Menu'),
+  });
+  new Nav({
+    el: document.querySelector('.Nav'),
+    menu,
+  });
+});

js/menu.js

@@ -0,0 +1,47 @@
+const CLS = {
+  visible: 'Menu--visible',
+  minimized: 'Menu--minimized',
+};
+
+export default class Menu {
+  constructor(cfg) {
+    this.el = cfg.el;
+    this.state = 'visible';
+
+    this.attachEvents();
+    setTimeout(() => {
+      this.showMenu();
+    }, 1000);
+  }
+
+  attachEvents() {
+    let lastKnownPosition = 0;
+    window.addEventListener('scroll', () => {
+      if (this.state !== 'hidden') {
+        if (this.state !== 'visible' && window.scrollY < lastKnownPosition) {
+          this.showMenu();
+        } else if (this.state !== 'minimized' && window.scrollY >
+          lastKnownPosition) {
+          this.minimizeMenu();
+        }
+        lastKnownPosition = window.scrollY;
+      }
+    });
+  }
+
+  showMenu() {
+    this.state = 'visible';
+    this.el.classList.add(CLS.visible);
+    this.el.classList.remove(CLS.minimized);
+  }
+
+  minimizeMenu() {
+    this.state = 'minimized';
+    this.el.classList.add(CLS.minimized);
+  }
+
+  hideMenu() {
+    this.state = 'hidden';
+    this.el.classList.remove(CLS.visible);
+  }
+}

js/nav.js

@@ -0,0 +1,31 @@
+const CLS = {
+  open: 'Nav--open',
+};
+
+export default class Nav {
+  constructor(cfg) {
+    this.el = cfg.el;
+    this.menu = cfg.menu;
+
+    this.attachEvents();
+  }
+
+  attachEvents() {
+    this.menu.el.addEventListener('click', () => {
+      this.menu.hideMenu();
+      this.openNav();
+    });
+    this.el.querySelector('.Nav-close').addEventListener('click', () => {
+      this.menu.showMenu();
+      this.closeNav();
+    });
+  }
+
+  openNav() {
+    this.el.classList.add(CLS.open);
+  }
+
+  closeNav() {
+    this.el.classList.remove(CLS.open);
+  }
+}

theme/footer.php

@@ -0,0 +1,2 @@
+<script type="text/javascript" src="<?php echo get_template_directory_uri()
+?>/bundle.js"></script>

theme/functions.php

@@ -1,5 +1,24 @@
 <?php
 
+class Windycoys_Walker extends Walker_Nav_Menu {
+  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
+    $title = $item->post_title;
+    $uri = get_site_url() . '/' . $item->post_name;
+
+    $output .= '<li class="Nav-listItem">';
+    $output .= '<a class="Nav-link" href="' . $uri .'">';
+    $output .= $title . '</a></li>';
+  }
+}
+
+function windycoys_nav() {
+  wp_nav_menu(array(
+    'container' => 'ul',
+    'menu_class' => 'Nav-list Nav--subList',
+    'walker' => new Windycoys_Walker()
+  ));
+}
+
 function windycoys_the_tags() {
   $tags = get_the_tags();
   if ($tags) {

theme/index.php

@@ -1,31 +1,35 @@
 <?php get_header() ?>
-  <main class="Grid">
+<main class="Grid">
-    <?php get_template_part('partials/logo') ?>
+  <?php get_template_part('partials/logo') ?>
-    <?php while ( have_posts() ) : the_post() ?>
+  <?php while ( have_posts() ) : the_post() ?>
-    <section class="Grid-article">
+  <section class="Grid-article">
-      <article class="Article">
+    <article class="Article">
-        <div class="Article-date">
+      <div class="Article-date">
-          <svg class="Icon">
+        <svg class="Icon">
-            <use href="#icon-calendar"></use>
+          <use href="#icon-calendar"></use>
-          </svg>
+        </svg>
-          <span class="Article-dateText">
+        <span class="Article-dateText">
-            <?php the_time(get_option('date_format')) ?>
+          <?php the_time(get_option('date_format')) ?>
-          </span>
+        </span>
-        </div>
+      </div>
-        <h1 class="Article-title">
+      <h1 class="Article-title">
-          <a href="<?php the_permalink(); ?>">
+        <a href="<?php the_permalink(); ?>">
-            <?php the_title(); ?>
+          <?php the_title(); ?>
-          </a>
+        </a>
-        </h1>
+      </h1>
-        <div class="Article-content">
+      <div class="Article-content">
-          <?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys' )  ); ?>
+        <?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys' )  ); ?>
-        </div>
+      </div>
-      </article>
+    </article>
-    </section>
+  </section>
-    <section class="Grid-metadata">
+  <section class="Grid-metadata">
-      <?php get_template_part('partials/metadata') ?>
+    <?php get_template_part('partials/metadata') ?>
-    </section>
+  </section>
-    <?php endwhile; ?>
+  <?php endwhile; ?>
-    <section class="Grid-footer">
+  <section class="Grid-footer">
-      <?php get_template_part('partials/footer') ?>
+    <?php get_template_part('partials/footer') ?>
-    </section>
+  </section>
+</main>
+<?php get_template_part('partials/menu') ?>
+<?php get_template_part('partials/nav') ?>
+<?php get_footer() ?>

theme/partials/menu.php

@@ -0,0 +1,6 @@
+<button class="Menu">
+  <span class="Menu-line"></span>
+  <span class="Menu-line"></span>
+  <span class="Menu-line"></span>
+  <span class="Menu-text">Open menu</span>
+</button>

theme/partials/nav.php

@@ -1,14 +1,36 @@
-<header class="Header">
+<nav class="Nav">
-  <div class="Header-logo">
+  <div class="Nav-content">
-	  <a href="<?php echo home_url(); ?>">
+    <h2 class="Nav-title">WindyCOYS</h2>
-			<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
-		</a>
-  </div>
-  <nav class="Nav">
     <ul class="Nav-list">
-      <li class="Nav-item">
+      <li class="Nav-listItem">
-        <a class="Nav-link" href="#">About</a>
+        <a class="Nav-link" href="<?php get_site_url() ?>/">Home</a>
+        <?php windycoys_nav() ?>
       </li>
     </ul>
-  </nav>
+    <button class="Nav-close">
-</header>
+      <span class="Nav-closeBar"></span>
+      <span class="Nav-closeBar"></span>
+      <span class="Nav-closeText">Close menu</span>
+    </button>
+    <div class="Nav-social">
+      <a class="Nav-socialLink" href="https://www.facebook.com/WindyCOYS/">
+        <svg class="Icon Icon--large">
+          <use href="#icon-facebook"></use>
+        </svg>
+      </a>
+      <a class="Nav-socialLink" href="https://twitter.com/windycoys/">
+        <svg class="Icon Icon--large">
+          <use href="#icon-twitter"></use>
+        </svg>
+      </a>
+    </div>
+    <div class="Nav-search">
+      <?php get_search_form() ?>
+    </div>
+  </div>
+  <button class="Nav-close">
+    <span class="Nav-closeBar"></span>
+    <span class="Nav-closeBar"></span>
+    <span class="Nav-closeText">Close menu</span>
+  </button>
+</nav>

theme/searchform.php

@@ -0,0 +1,9 @@
+<form id="searchform" role="search" method="get" action="<?php get_site_url()?>">
+  <div class="Search">
+    <label class="Search-label" for="searchinput">
+      Search
+    </label>
+    <input id="searchinput" class="Search-input" name="s" type="text" placeholder="Search">
+    <input id="searchsubmit" class="Search-submit" value="Search" type="submit">
+  </div>
+</form>