Fix mobile toggle icon

Author: quicoto

static/images/icons/menu-closed.svg

@@ -7,6 +7,8 @@
   }
 
   function _toggleMobileNav() {
+    const ariaExpanded = _$.mobileToggle.getAttribute('aria-expanded') === "true"
+    _$.mobileToggle.setAttribute("aria-expanded", !ariaExpanded);
     _$.navbarCollapse.classList.toggle('show');
   }
 

static/images/icons/menu-opened.svg

@@ -1,4 +1,16 @@
 .header-logo {
   max-width: 200px;
   width: 100%;
+}
+
+.navbar-toggler .icon {
+  display: none;
+}
+
+.navbar-toggler[aria-expanded="true"] .icon--opened {
+  display: block;
+}
+
+.navbar-toggler[aria-expanded="false"] .icon--closed {
+  display: block;
 }

themes/influencer-hugo/assets/js/script.js

@@ -11,7 +11,8 @@ <h2 class="mb-0 text-color">{{ .Site.Title }}</h2>
       <!-- Toggler -->
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmain"
         aria-controls="navbarmain" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="ti-menu-alt"></span>
+        <img class="icon icon--closed mr-2" alt="Menu closed" src="/images/icons/menu-closed.svg" />
+        <img class="icon icon--opened mr-2" alt="Menu opened" src="/images/icons/menu-opened.svg" />
       </button>
 
       <!-- Collapse -->