Simplify site-nav-toggle element

layout/_partials/header/brand.njk

@@ -1,10 +1,8 @@
 <div class="site-brand-container">
-  <div class="site-nav-search">
-    <div class="toggle popup-trigger" aria-label="{{ __('menu.search') }}" role="button">
-      {%- if theme.algolia_search.enable or theme.local_search.enable %}
-        <i class="fa fa-search fa-fw fa-lg"></i>
-      {%- endif %}
-    </div>
+  <div class="site-nav-search popup-trigger" aria-label="{{ __('menu.search') }}" role="button">
+    {%- if theme.algolia_search.enable or theme.local_search.enable %}
+      <i class="fa fa-search fa-fw fa-lg"></i>
+    {%- endif %}
   </div>
 
   <div class="site-meta">
@@ -25,11 +23,9 @@
     {%- endif %}
   </div>
 
-  <div class="site-nav-toggle">
-    <div class="toggle" aria-label="{{ __('accessibility.nav_toggle') }}" role="button">
-      {%- if theme.menu %}
-        <i class="fa fa-ellipsis fa-fw fa-lg"></i>
-      {%- endif %}
-    </div>
+  <div class="site-nav-toggle" aria-label="{{ __('accessibility.nav_toggle') }}" role="button">
+    {%- if theme.menu %}
+      <i class="fa fa-ellipsis fa-fw fa-lg"></i>
+    {%- endif %}
   </div>
 </div>

source/css/_common/outline/header/index.styl

@@ -12,11 +12,10 @@
 .site-brand-container {
   display: flex;
   flex-shrink: 0;
-  padding: 0 10px;
 }
 
 .use-motion {
-  .column, .site-brand-container .toggle {
+  .column {
     opacity: 0;
   }
 }

source/css/_common/outline/header/site-nav.styl

@@ -1,13 +1,19 @@
 .site-nav-toggle, .site-nav-search {
+  color: var(--text-color);
   display: none;
+  padding: 0 10px;
+
+  .fa {
+    transition: transform .5s;
+  }
 
   +mobile() {
     flex-column();
   }
+}
 
-  .toggle {
-    color: var(--text-color);
-  }
+.site-nav-on .site-nav-toggle .fa {
+  transform: rotate(-90deg);
 }
 
 .site-nav {

source/css/_schemes/Pisces/_header.styl

@@ -21,11 +21,9 @@
 }
 
 .site-nav-toggle, .site-nav-search {
+  color: white;
+
   +tablet() {
     flex-column();
   }
-
-  .toggle {
-    color: white;
-  }
 }

source/css/noscript.styl

@@ -15,7 +15,6 @@ body { margin-top: 2rem; }
 }
 
 .use-motion .column,
-.use-motion .site-brand-container .toggle,
 .use-motion .footer { opacity: initial; }
 
 .use-motion .site-title,

source/js/next-boot.js

@@ -9,8 +9,7 @@ NexT.boot.registerEvents = function() {
     NexT.utils.updateFooterPosition();
 
     // Mobile top menu bar.
-    document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {
-      event.currentTarget.classList.toggle('toggle-close');
+    document.querySelector('.site-nav-toggle').addEventListener('click', event => {
       const siteNav = document.querySelector('.site-nav');
       if (!siteNav) return;
       siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px');