woodpecker/cmd/drone-server/static/scripts/views/layout.html

<header>
  <div class="toolbar" ui-view="toolbar"></div>

  <ul ng-if="user">
    <li>
      <img ng-src="{{ user.avatar }}" />
    </li>
    <li ng-init="show=false">
      <a href="#" ng-click="show=true">
        <span>{{user.login}}</span>
        <i class="material-icons">more_vert</i>
      </a>
      <div class="backdrop" ng-show="show" ng-click="show=false"></div>
      <div class="dropdown" ng-show="show" ng-click="show=false">
        <ul>
          <li><a href="/profile">Profile</a></li>
          <li><a href="/users">Users</a></li>
        </ul>
      </div>
    </li>
  </ul>

  <ul ng-if="!user">
    <li>
      <a href="/login" class="button button-login">Login</a>
    </li>
  </ul>
</header>

<div ui-view="content"></div>

<style>
header ul li a i {
  cursor:pointer;
}
header li {
  position:relative;
}
.backdrop {
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  z-index:99;
  cursor:default;
}
.dropdown {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  position: absolute;
  top: 60px;
  right: 15px;
  width: 200px;
  background: #FFF;
  z-index:999;
  padding: 10px 0px;
}
.dropdown ul {
  float:inherit;
  margin:0px;
}
.dropdown li {
  display:block;
}
.dropdown li > a {
  padding: 15px 20px;
  display: block;
  line-height: inherit;
  text-transform: none;
}
.dropdown li > a:hover {
  background:#F5F7F9;
}
</style>