feat: change icon for navToggle (#1394)

facebook · Apr 26, 2019 · 195e934 · 195e934
1 parent 16bec1c
commit 195e934
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 49 deletions.
diff --git a/packages/docusaurus-1.x/lib/core/nav/SideNav.js b/packages/docusaurus-1.x/lib/core/nav/SideNav.js
@@ -134,7 +134,11 @@ class SideNav extends React.Component {
           <section className="navWrapper wrapper">
             <div className="navBreadcrumb wrapper">
               <div className="navToggle" id="navToggler">
-                <i />
+                <div className="hamburger-menu">
+                  <div className="line1" />
+                  <div className="line2" />
+                  <div className="line3" />
+                </div>
               </div>
               <h2>
                 <i>›</i>

diff --git a/packages/docusaurus-1.x/lib/static/css/main.css b/packages/docusaurus-1.x/lib/static/css/main.css
@@ -1736,65 +1736,41 @@ input::placeholder {
   width: 18px;
 }
 
-.toc .toggleNav .navToggle:before,
-.toc .toggleNav .navToggle:after {
-  border: 5px solid #393939;
-  border-width: 5px 0;
-  content: '';
-  height: 6px;
-  left: 0;
-  left: 8px;
-  margin-top: -8px;
+.hamburger-menu {
   position: absolute;
-  top: 50%;
-  transform: rotate(45deg);
-  width: 3px;
-  z-index: 1;
-}
-
-.toc .toggleNav .navToggle:after {
-  transform: rotate(-45deg);
+  top: 6px;
+  width: 100%;
 }
 
-.toc .toggleNav .navToggle i:before,
-.toc .toggleNav .navToggle i:after {
-  background: transparent;
-  border-color: transparent #393939;
-  border-style: solid;
-  border-width: 0 5px 5px;
-  content: '';
-  height: 0;
-  left: 2px;
-  margin-top: -7px;
-  opacity: 1;
-  position: absolute;
-  top: 50%;
-  width: 5px;
-  z-index: 10;
+.line1, .line2, .line3 {
+  width: 100%;
+  height: 3px;
+  background-color: #393939;
+  margin: 3px 0;
+  transition: 0.4s;
+  border-radius: 10px;
 }
 
-.toggleNav h2 i {
-  padding: 0 4px;
+.docsSliderActive .hamburger-menu {
+  top: 12px;
 }
 
-.toc .toggleNav .navToggle i:after {
-  border-width: 5px 5px 0;
-  margin-top: 2px;
+.docsSliderActive .line1 {
+  position: absolute;
+  top: 50%;
+  transform: rotate(-45deg);
 }
-
-.docsSliderActive .toc .toggleNav .navToggle:before,
-.docsSliderActive .toc .toggleNav .navToggle:after {
-  border-width: 8px 0;
-  height: 0;
-  margin-top: -8px;
+.docsSliderActive .line2 {
+  display: none;
 }
-
-.docsSliderActive .toc .toggleNav .navToggle i {
-  opacity: 0;
+.docsSliderActive .line3 {
+  position: absolute;
+  top: 50%;
+  transform: rotate(45deg);
 }
 
-.docsSliderActive .tocToggler {
-  visibility: hidden;
+.toggleNav h2 i {
+  padding: 0 4px;
 }
 
 .toc .toggleNav .navGroup {