Update Header and Layout Navigation Elements

Author: ujibang

_includes/header.html

@@ -5,8 +5,14 @@
                 <h2 class="text-white"><strong>REST</strong>Heart</h2>
             </a>
             <!-- Place this tag where you want the button to render. -->
-            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-ex1-collapse"><span
-                    class="visually-hidden">Toggle navigation</span> &#x2630;</button>
+            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-ex1-collapse">
+                <span class="visually-hidden">Toggle navigation</span>
+                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="3" y1="12" x2="21" y2="12"></line>
+                    <line x1="3" y1="6" x2="21" y2="6"></line>
+                    <line x1="3" y1="18" x2="21" y2="18"></line>
+                </svg>
+            </button>
             <div class="collapse navbar-collapse navbar-ex1-collapse background-primary" id="scrollTarget">
                 <ul class="nav navbar-nav ms-md-auto">
                     <!-- only bounce slack button on home page-->

_layouts/docs-adoc.html

@@ -69,15 +69,15 @@
               <div class="d-flex flex-wrap justify-content-between align-items-center">
                   <a href="https://github.com/SoftInstigate/restheart-website/edit/master/{{ page.path }}"
                       class="small mt-2 mb-1 ml-lg-auto"><i class="icon-pencil"></i>Edit Page</a>
-                  <button class="btn btn-link bd-sidebar__toggle p-0 mb-1 d-md-none" type="button"
+                  <button class="btn btn-primary bd-sidebar__toggle mb-2 d-md-none w-100" type="button"
                       data-bs-toggle="collapse" data-bs-target="#bd-sidebar__menu" aria-controls="bd-sidebar__menu"
                       aria-expanded="false" aria-label="Toggle docs navigation">
-                      Table of Contents
-                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30"
-                          focusable="false">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="20" height="20"
+                          focusable="false" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
                           <title>Menu</title>
                           <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22" />
                       </svg>
+                      Documentation Menu
                   </button>
               </div>
           </div>

_layouts/docs.html

@@ -102,21 +102,21 @@
             ><i class="icon-pencil"></i>Edit Page</a
           >
           <button
-            class="btn btn-link bd-sidebar__toggle navbar-expand-md p-0 mb-1 d-md-none"
+            class="btn btn-primary bd-sidebar__toggle navbar-expand-md mb-2 d-md-none w-100"
             type="button"
             data-bs-toggle="collapse"
             data-bs-target="#bd-sidebar__menu"
             aria-controls="bd-sidebar__menu"
             aria-expanded="false"
             aria-label="Toggle docs navigation"
           >
-            Table of Contents
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewbox="0 0 30 30"
-              width="30"
-              height="30"
+              width="20"
+              height="20"
               focusable="false"
+              style="display: inline-block; vertical-align: middle; margin-right: 8px;"
             >
               <title>Menu</title>
               <path
@@ -127,6 +127,7 @@
                 d="M4 7h22M4 15h22M4 23h22"
               />
             </svg>
+            Documentation Menu
           </button>
         </div>
       </div>

_sass/layout.scss

@@ -852,7 +852,13 @@ hr {
 .navbar-toggler {
   margin: 10px 0 10px auto;
   color: #fff;
-  border-color: #fff;
+  border: none;
+  padding: 0.25rem 0.5rem;
+}
+
+.navbar-toggler:focus {
+  box-shadow: none;
+  outline: none;
 }
 
 .navbar-nav > li > a {
@@ -921,6 +927,7 @@ hr {
     left: -15px;
     right: -15px;
     background: var(--primarycolor);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     padding: 1rem 0;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.34);