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:

  <li class="nav-item dropdown user user-menu">
    <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>
    <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
      <!-- User image -->
      <li class="user-header bg-primary">
        <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">

        <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