Profile Menu

<div class="nuda-pm">
  <div class="nuda-pm__head">
    <div class="nuda-pm__avatar">SG</div>
    <div>
      <div class="nuda-pm__name">Santiago</div>
      <div class="nuda-pm__email">hi@nudaui.dev</div>
    </div>
  </div>
  <ul class="nuda-pm__list">
    <li class="nuda-pm__item">Dashboard</li>
    <li class="nuda-pm__item">Billing</li>
    <li class="nuda-pm__item">Sign out</li>
  </ul>
</div>

.nuda-pm {
  min-width: 200px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
  animation: _pmIn .2s ease-out;
}

.nuda-pm__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nuda-pm__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e4ff54;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
}

.nuda-pm__name {
  font-size: .82rem;
  color: #fafafa;
  font-weight: 600;
}

.nuda-pm__email {
  font-size: .7rem;
  color: #777;
}

.nuda-pm__list {
  list-style: none;
  margin: 0;
  padding: .35rem;
}

.nuda-pm__item {
  padding: .5rem .6rem;
  border-radius: 6px;
  font-size: .8rem;
  color: #cfcfcf;
  cursor: pointer;
}

.nuda-pm__item:hover {
  background: rgba(228,255,84,.1);
  color: #fafafa;
}

@keyframes _pmIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pm {
    animation: none;
  }
}