Merge pull request #313 from fourkitchens/291--nav-accessibility

291: move icon inside navigation

components/_patterns/02-molecules/menus/main-menu/_00-main-menu.scss

@@ -10,7 +10,15 @@ $main-menu-medium: 43em;
   }
 
   &--open {
+    background-color: $white;
     display: block;
+    height: 85%;
+    left: 0;
+    overflow-y: scroll;
+    position: fixed;
+    top: 134px;
+    right: 0;
+    width: 100%;
   }
 }
 
@@ -25,17 +33,6 @@ $main-menu-medium: 43em;
   @include breakpoint($main-menu-medium) {
     border-bottom: none;
   }
-
-  &--open {
-    position: fixed;
-    top: 134px;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 85%;
-    overflow-y: scroll;
-    background-color: $white;
-  }
 }
 
 //

components/_patterns/02-molecules/menus/main-menu/main-menu.twig

@@ -1,21 +1,23 @@
 {{ attach_library('emulsify/main-menu') }}
 
-<a href="#" id="toggle-expand" class="toggle-expand">
-  <span class="toggle-expand__open">
-    {% include "@atoms/04-images/icons/_icon.twig" with {
-      icon_base_class: "icon",
-      icon_blockname: "toggle-expand",
-      icon_name: "bars",
+<nav >
+  <a href="#" id="toggle-expand" class="toggle-expand">
+    <span class="toggle-expand__open">
+      {% include "@atoms/04-images/icons/_icon.twig" with {
+        icon_base_class: "icon",
+        icon_blockname: "toggle-expand",
+        icon_name: "bars",
+      } %}
+      <span class="toggle-expand__text">Main Menu</span>
+    </span>
+    <span class="toggle-expand__close">
+      <span class="toggle-expand__text">Close</span>
+    </span>
+  </a>
+  <div id="main-nav" class="main-nav">
+    {% include "@molecules/menus/_menu.twig" with {
+      menu_class: "main-menu",
+      items: menu_items,
     } %}
-    <span class="toggle-expand__text">Main Menu</span>
-  </span>
-  <span class="toggle-expand__close">
-    <span class="toggle-expand__text">Close</span>
-  </span>
-</a>
-<nav id="main-nav" class="main-nav">
-  {% include "@molecules/menus/_menu.twig" with {
-    menu_class: "main-menu",
-    items: menu_items,
-  } %}
+</div>
 </nav>