docs: add mobile menu

docs/css/style.css

@@ -82,26 +82,23 @@ img {
 }
 
 .github-corner svg {
+  z-index: 1;
   border-bottom: 0;
   position: fixed;
   right: 0;
   text-decoration: none;
   top: 0;
-  z-index: 1;
+  color: white;
+  fill: var(--secondary-color);
+  height: 80px;
+  width: 80px;
 }
 
 .github-corner:hover svg .octo-arm {
   opacity: 1;
   animation: b 560ms ease-in-out;
 }
 
-.github-corner svg {
-  color: #fff;
-  fill: var(--secondary-color);
-  height: 80px;
-  width: 80px;
-}
-
 main {
   display: block;
   position: relative;
@@ -214,16 +211,58 @@ body.sticky .sidebar-toggle {
 }
 
 @media screen and (max-width: 768px) {
-  .github-corner,
   .sidebar {
     position: fixed;
   }
 
-  .sidebar,
+  .github-corner svg {
+    height: 62px !important;
+    width: 62px !important;
+  }
+
+  .sidebar {
+    left: -300px;
+  }
+
   .sidebar-toggle {
+    cursor: pointer;
+    display: inherit;
+    border: 0;
+    outline: none;
+    padding: 0 10px;
+    left: 6px;
+    transition: opacity 0.3s;
+    z-index: 4;
+    position: fixed;
+    top: 0;
+    height: 62px;
+    width: 100%;
+    background: var(--bg-color);
+  }
+
+  .sidebar-toggle span {
+    background-color: var(--secondary-color);
+    display: block;
+    margin-bottom: 5px;
+    width: 24px;
+    height: 3px;
+  }
+
+  body.sidebar-toggle {
     display: none;
   }
 
+  body.close .sidebar,
+  body.close .content  {
+    transform: translateX(280px);
+  }
+
+  body.close .sidebar-toggle {
+    background: var(--background-color);
+    transition: background-color 0.3s;
+    width: 284px;
+  }
+
   main {
     height: auto;
     overflow-x: hidden;

package.json

@@ -233,7 +233,7 @@
       "@commitlint/config-conventional"
     ],
     "rules": {
-      "body-max-length": [
+      "body-max-line-length": [
         0
       ]
     }