Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dropdown menu for user into version adminlte 3 as in previous version adminlte2 #1942

Closed
allaghi opened this issue Jul 18, 2018 · 7 comments

Comments

Projects
5 participants
@allaghi
Copy link

commented Jul 18, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jul 20, 2018

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

@allaghi

This comment has been minimized.

Copy link
Author

commented Jul 21, 2018

adminlte

@allaghi

This comment has been minimized.

Copy link
Author

commented Jul 21, 2018

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

This comment has been minimized.

Copy link

commented Aug 29, 2018

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:

user-menu

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

This comment has been minimized.

Copy link
Author

commented Aug 29, 2018

@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

This comment has been minimized.

Copy link

commented Apr 10, 2019

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

@REJack REJack added this to the v3 milestone May 22, 2019

@REJack REJack added this to Backlog in v3.0.0-beta.1 May 23, 2019

@REJack REJack moved this from Backlog to Ready in v3.0.0-beta.1 Jun 6, 2019

@REJack REJack moved this from Ready to In progress in v3.0.0-beta.1 Jun 12, 2019

@REJack

This comment has been minimized.

Copy link
Collaborator

commented Jun 17, 2019

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

@REJack REJack closed this Jun 17, 2019

v3.0.0-beta.1 automation moved this from In progress to Done Jun 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.