enhance brand-link with pushmenu inside brand (#2910)

build/scss/_brand.scss

@@ -22,12 +22,38 @@
 
   [class*="sidebar-dark"] & {
     border-bottom: 1px solid lighten($dark, 10%);
+
+    &,
+    .pushmenu {
       color: rgba($white, .8);
+
+      &:hover {
+        color: $white;
+      }
+    }
   }
 
   [class*="sidebar-light"] & {
     border-bottom: 1px solid $gray-300;
+
+    &,
+    .pushmenu {
       color: rgba($black, .8);
+
+      &:hover {
+        color: $black;
+      }
+    }
+  }
+
+  .pushmenu {
+    margin-right: $sidebar-padding-x;
+    font-size: $font-size-base;
+  }
+
+  .brand-link {
+    padding: 0;
+    border-bottom: none;
   }
 
   .brand-image {

docs/components/main-sidebar.md

@@ -88,6 +88,19 @@ You can use two logo images instead of logo with text, you only need to change t
 
 Based on the example above, you can replace `.brand-image-xl` on `.logo-xs` with `.brand-image-xs` or vice versa on `.logo-xl` for changed logo sizes.
 
+#### Brand with Pushmenu Button
+
+You can place the pushmenu button inside the brand, simply replace the brand-link code with the code below:
+
+```html
+<div class="brand-link d-flex justify-content-between align-items-center">
+  <a class="brand-link" href="index3.html">
+    <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3">
+    <span class="brand-text font-weight-light">AdminLTE 3</span>
+  </a>
+  <a class="pushmenu" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
+</div>
+```
 
 #### Search Form in Sidebar