refactored structure of top and side navs for better mobile layout

assets/styles/layouts/_layout-sidebar.scss

@@ -6,6 +6,7 @@
 
   &--search {
     position: relative;
+    flex-grow: 1;
     &:after {
       content: '\e905';
       display: block;
@@ -40,54 +41,69 @@
     }
   }
 
-  .contents-toggle {
+  .search-nav-toggle {
     display: flex;
-    justify-content: space-between;
+    width: 100%;
-    margin: .25rem 0;
+    margin-bottom: .7rem;
-    color: $sidebar-contents;
+  }
-    font-weight: bold;
-    font-style: italic;
 
-    p { margin: .65rem 0 .65rem .25rem; }
+  #contents-toggle-btn {
+    display: block;
+    margin: .35rem .05rem .25rem 1.2rem;
+    width: 20px;
+    height: 20px;
 
-    #contents-toggle-btn {
+    .toggle-hamburger {
-      margin-top: .2rem;
+
-      height: 26px;
+      $line-height: 2px;
-      width: 26px;
+      $line-width: 20px;
-      display: inline-block;
+
+      display: block;
       position: relative;
+      margin-top: .65rem;
+      background: $sidebar-contents;
+      width: $line-width;
+      height: $line-height;
+      transition: all .3s;
+      transform: rotate(0deg);
 
       &:before, &:after {
         content: "";
         display: block;
         position: absolute;
-        top: 13px;
+        width: $line-width;
-        right: 5px;
+        height: $line-height;
-        width: 16px;
-        height: 2px;
         border-radius: 1px;
         background: $sidebar-contents;
+        transform: rotate(0deg);
         transition: all .3s;
       }
 
       &:before {
-        transform: rotate(0deg);
+        top: -6px;
       }
       &:after {
-        transform: rotate(90deg)
+        top: 6px;
       }
+    }
+
+    &:hover {
+      .toggle-hamburger {
+        background: $sidebar-contents-hover;
 
-      &:hover {
         &:before, &:after {
           background: $sidebar-contents-hover;
         }
       }
-
-      &.open {
-        &:before { transform: rotate(180deg); }
-        &:after { transform: rotate(180deg); }
-      }
     }
+
+    &.open .toggle-hamburger {
+      background: $body-bg;
+      transform: rotate(90deg);
+      &:before { transform: rotate(-135deg); top: 0; }
+      &:after { transform: rotate(-45deg); top: 0; }
+    }
+
   }
 
   #nav-tree {
@@ -201,14 +217,12 @@
     max-width: 100%;
 
     #nav-tree {
-      max-height: 0;
+      height: 0;
       overflow: hidden;
       margin: 0;
-      transition: max-height .2s ease-out;
 
       &.open {
-        max-height: 2000px;
+        height: auto;
-        transition: max-height .2s ease-out;
         overflow: auto;
         margin-bottom: 2rem;
       }
@@ -217,7 +231,7 @@
 }
 
 @include media(large_min) {
-  .sidebar .contents-toggle {
+  .sidebar #contents-toggle-btn {
     display: none;
   }
 }

assets/styles/layouts/_layout-topnav.scss

@@ -1,6 +1,6 @@
 .topnav {
   display: flex;
-  padding: .75em;
+  padding: .75rem .75rem .65rem;
   justify-content: space-between;
 
   &--left {  }

layouts/partials/sidebar.html

@@ -1,22 +1,22 @@
 {{ $currentPage := . }}
 {{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) }}
 <aside class="sidebar">
-  <div class="sidebar--search">
+  <div class="search-nav-toggle">
-    <input  class="sidebar--search-field"
+    <div class="sidebar--search">
-            id="algolia-search-input"
+      <input  class="sidebar--search-field"
-            type="text"
+              id="algolia-search-input"
-            accesskey="s"
+              type="text"
-            autocomplete="off"
+              accesskey="s"
-            autocorrect="off"
+              autocomplete="off"
-            autocapitalize="off"
+              autocorrect="off"
-            spellcheck="false"
+              autocapitalize="off"
-            dir="auto"
+              spellcheck="false"
-            placeholder="Search {{ $currentVersion }}">
+              dir="auto"
-  </div>
+              placeholder="Search {{ $currentVersion }}">
-
+    </div>
-  <div class="contents-toggle">
+    <a id="contents-toggle-btn" href="#">
-    <p>Contents</p>
+      <span class="toggle-hamburger"></span>
-    <a id="contents-toggle-btn" href="#"></a>
+    </a>
   </div>
 
   <ul id="nav-tree">