Adminlte: Add dropdown menu for user into version adminlte 3 as in previous version adminlte2

[allaghi]

Environment:

• AdminLTE Version: 3

Hi everyone,
Have a nice day,
I am wondering if you could add dropdwon menu for user beside notification dropdown menu as previous version

[shiri1248]

Hi @allaghi
I would like to work on this issue.
Can you elaborate the requirement, I couldn't understand about the requirement.

[allaghi]

[allaghi]

Hi @shiri1248 , I have just download image of what I want . In previous version of Admin LTE, there was a dropdown menu for a user , include logout link.

[BruceHill]

I was also wanting this user menu in AdminLTE version 3 and have managed to add it back. See screenshot below of what it looks like:

I added this back by adding this HTML code after the notification icon:

Alexander Pierce

• 
  

          <p>
            Alexander Pierce - Web Developer
            <small>Member since Nov. 2012</small>
          </p>
        </li>
        <!-- Menu Body -->
        <li class="user-body">
          <div class="row">
            <div class="col-4 text-center">
              <a href="#">Followers</a>
            </div>
            <div class="col-4 text-center">
              <a href="#">Sales</a>
            </div>
            <div class="col-4 text-center">
              <a href="#">Friends</a>
            </div>
          </div>
          <!-- /.row -->
        </li>
        <!-- Menu Footer-->
        <li class="user-footer">
          <div class="pull-left">
            <a href="#" class="btn btn-default btn-flat">Profile</a>
          </div>
          <div class="pull-right">
            <a href="#" class="btn btn-default btn-flat">Sign out</a>
          </div>
        </li>
      </ul>
    </li>
  

  And added this SCSS at the bottom of _dropdown.scss:

  .navbar-nav > .user-menu {
    > .nav-link:after {
      content:none;
    }
    > .dropdown-menu {
      @include border-top-radius(0);
      padding: 0;
      border-top-width: 0;
      width: 280px;
  
      &,
      > .user-body {
        @include border-bottom-radius(4px);
      }
  
      // Header menu
      > li.user-header {
        height: 175px;
        padding: 10px;
        text-align: center;
        // User image
        > img {
          z-index: 5;
          height: 90px;
          width: 90px;
          border: 3px solid;
          border-color: transparent;
          border-color: rgba(255, 255, 255, 0.2);
        }
        > p {
          z-index: 5;
          color: #fff;
          color: rgba(255, 255, 255, 0.8);
          font-size: 17px;
          //text-shadow: 2px 2px 3px #333333;
          margin-top: 10px;
          > small {
            display: block;
            font-size: 12px;
          }
        }
      }
  
      // Menu Body
      > .user-body {
        padding: 15px;
        border-bottom: 1px solid #f4f4f4;
        border-top: 1px solid #dddddd;
        @include clearfix();
        a {
          color: #444 !important;
          @include media-breakpoint-up(sm) {
            background: #fff !important;
            color: #444 !important;
          }
        }
      }
  
      // Menu Footer
      > .user-footer {
        background-color: #f9f9f9;
        padding: 10px;
        @include clearfix();
        .btn-default {
          color: #666666;
          &:hover {
            @include media-breakpoint-up(sm) {
              background-color: #f9f9f9;
            }
          }
        }
      }
    }
    .user-image {
      float: left;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-right: 10px;
      margin-top: -2px;
      @include media-breakpoint-up(sm) {
        float: none;
        margin-right: 0;
        margin-top: -8px;
        line-height: 10px;
      }
    }
  }
  
  

[allaghi]

@BruceHill Thank you so much . It's perfect just I did some changes , I replaced this section of code
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"> <img src="dist/img/user2-160x160.jpg" class="user-image img-circle elevation-2 alt="User Image"> <span class="hidden-xs">Alexander Pierce</span> </a>

with this
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"> <img src="dist/img/user2-160x160.jpg" class="user-image img-circle elevation-2" alt="User Image"> <span class="d-none d-md-block float-right">Alexander Pierce</span> </a>

also I omit this section of code from css
@include media-breakpoint-up(sm) { float: none; margin-right: 0; margin-top: -8px; line-height: 10px; }

[kryptonite21]

Hi Sirs, how to compile the AdminLTE 3's SASS file (_dropdown.scss)? Thank you in advance!

[REJack]

I've added the legacy menu into v3-dev, you can look over it here