Add Menu and Navigation

2018-02-12 19:48:25 +00:00
parent 5f05b29d0b
commit 285305af67
16 changed files with 453 additions and 43 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 theme/style.css
+theme/bundle.js
--- a/css/grid.css
+++ b/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);
 }

--- a/css/icon.css
+++ b/css/icon.css
@@ -11,6 +11,11 @@
  width: 24px;
 }

+.Icon--large {
+  height: 48px;
+  width: 48px;
+}
+
 .Icon--facebook {
  color: var(--colorFacebook);
 }
--- a/css/index.css
+++ b/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;
 }
--- a/css/menu.css
+++ b/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%);
+}
--- a/css/nav.css
+++ b/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);
+}
+
--- a/css/search.css
+++ b/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;
+}
--- a/js/index.js
+++ b/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,
+  });
+});
--- a/js/menu.js
+++ b/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);
+  }
+}
--- a/js/nav.js
+++ b/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);
+  }
+}
--- a/theme/footer.php
+++ b/theme/footer.php
@@ -0,0 +1,2 @@
+<script type="text/javascript" src="<?php echo get_template_directory_uri()
+?>/bundle.js"></script>
--- a/theme/functions.php
+++ b/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) {
--- a/theme/index.php
+++ b/theme/index.php
@@ -1,5 +1,5 @@
 <?php get_header() ?>
-  <main class="Grid">
+<main class="Grid">
  <?php get_template_part('partials/logo') ?>
  <?php while ( have_posts() ) : the_post() ?>
  <section class="Grid-article">
@@ -29,3 +29,7 @@
  <section class="Grid-footer">
    <?php get_template_part('partials/footer') ?>
  </section>
+</main>
+<?php get_template_part('partials/menu') ?>
+<?php get_template_part('partials/nav') ?>
+<?php get_footer() ?>
--- a/theme/partials/menu.php
+++ b/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>
--- a/theme/partials/nav.php
+++ b/theme/partials/nav.php
@@ -1,14 +1,36 @@
-<header class="Header">
-  <div class="Header-logo">
-	  <a href="<?php echo home_url(); ?>">
-			<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
-		</a>
-  </div>
-  <nav class="Nav">
+<nav class="Nav">
+  <div class="Nav-content">
+    <h2 class="Nav-title">WindyCOYS</h2>
    <ul class="Nav-list">
-      <li class="Nav-item">
-        <a class="Nav-link" href="#">About</a>
+      <li class="Nav-listItem">
+        <a class="Nav-link" href="<?php get_site_url() ?>/">Home</a>
+        <?php windycoys_nav() ?>
      </li>
    </ul>
-  </nav>
-</header>
+    <button class="Nav-close">
+      <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>
--- a/theme/searchform.php
+++ b/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>