Rework navigation walker

css/nav.css

@@ -118,18 +118,21 @@
   top: -10000px;
 }
 
+.nav__menu {
+  flex-grow: 1;
+}
+
 /**
  * nav List
  */
 
 .nav__list {
-  flex-grow: 1;
   font-family: var(--heading-font-family);
   font-size: 1.5rem;
 }
 
-.nav__list--sub-list {
-  margin: 0 0 0 var(--space-sm);
+.nav__list .nav__list {
+  margin-left: var(--space-sm);
 }
 
 .nav__link,

theme/classes/walker.navigation.php

@@ -0,0 +1,25 @@
+class Windycoys_Walker_Navigation extends Walker_Nav_Menu {
+  function start_lvl(&$output, $depth = 0) {
+    $output .= '<ul class="nav__list">';
+  }
+
+  function end_lvl(&$output) {
+    $output .= '</ul>';
+  }
+
+  function start_el(&$output, $item) {
+    $title = $item->title;
+    $url = $item->url;
+    if ($title && $url) {
+      $output .= '<li class="nav__list-item" role="none">';
+      $output .= sprintf('<a class="nav__link" href="%s" role="menuitem">', $url);
+      $output .= $title;
+      $output .= '</a>';
+    }
+  }
+
+  function end_el(&$output) {
+    $output .= '</li>';
+  }
+}
+

theme/functions.php

@@ -29,25 +29,6 @@ class Windycoys_Walker_Comment extends Walker_Comment {
   }
 }
 
-class Windycoys_Walker_Nav 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__item" role="none">';
-    $output .= '<a class="nav__link" href="' . $uri .'" role="menuitem">';
-    $output .= $title . '</a></li>';
-  }
-}
-
-function windycoys_nav() {
-  wp_nav_menu(array(
-    'container' => 'ul',
-    'menu_class' => 'nav__list nav__list--sub-list',
-    'walker' => new Windycoys_Walker_Nav()
-  ));
-}
-
 function windycoys_the_tags() {
   $tags = get_the_tags();
   if (!$tags) return false;

theme/partials/navigation.php

@@ -1,3 +1,4 @@
+<?php require '../classes/walker.navigation.php' ?>
 <nav class="nav<?php echo is_user_logged_in() ? ' logged-in' : '' ?>" aria-label="Main Navigation">
   <button class="menu">
     <span class="menu__line"></span>
@@ -16,12 +17,12 @@
         <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">
-      <li class="nav__list-item" role="none">
-        <a class="nav__link" href="<?php get_site_url() ?>/" role="menuitem">Home</a>
-        <?php windycoys_nav() ?>
-      </li>
-    </ul>
+    <?php wp_nav_menu(array(
+      menu => 'navigation',
+      container_class => 'nav__menu',
+      menu_class => 'nav__list',
+      walker => new Windycoys_Walker_Navigation()
+    )); ?>
     <div class="nav__social">
       <a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
         <svg class="icon icon--large">