Camel2.0 — Dokumentacja komponentów UI

2.11 #Components.DropdownProfile Dropdown Profile

Panel profilu użytkownika rozwijany z navbara. Zawiera nagłówek z tytułem, kartę punktów (wartość + obrazek + data wygaśnięcia + CTA), menu linków i przycisk wylogowania. Animacja stagger (slideIn). Responsywne skalowanie na desktop < 2xl. JS: trigger .navbar__profile-toggle, stan .is-open.

Example

Markup: dropdown-profile.html

<!-- Dropdown Profile: statyczny podgląd -->
<div style="position:relative; max-width:320px; background:#f5f5f1; border-radius:8px; padding:20px;">
  <div class="dropdown-profile__header" style="opacity:1; width:100%;">
    <div class="dropdown-profile__spacer"></div>
    <span class="dropdown-profile__title">Mój profil</span>
    <button class="dropdown-profile__close">✕</button>
  </div>
  <div class="dropdown-profile__card" style="opacity:1; width:100%;">
    <div class="dropdown-profile__points-row">
      <div class="dropdown-profile__points-info">
        <span class="dropdown-profile__points-value">1250</span>
        <span class="dropdown-profile__points-label">PUNKTY</span>
      </div>
    </div>
    <div class="dropdown-profile__divider"></div>
    <p class="dropdown-profile__expiry">Ważne do: <strong>31.12.2026</strong></p>
    <a href="#" class="dropdown-profile__card-cta">Zobacz szczegóły</a>
  </div>
  <div class="dropdown-profile__menu" style="opacity:1; width:100%;">
    <a href="#" class="dropdown-profile__menu-item">Moje dane</a>
    <a href="#" class="dropdown-profile__menu-item">Historia zamówień</a>
  </div>
  <button class="dropdown-profile__logout" style="opacity:1;">
    Wyloguj się
  </button>
</div>

Source: src/scss/components/_dropdown-profile.scss, line 1