paypoint-frontend/src/app/components/dropdown-content/dropdown-content.component.html

<div class="dropdown-content">
  <div>
    <div class="dropdown-section-title">Agenda Beheer</div>
    <tui-data-list>
      <button tuiOption class="dropdown-item" (click)="shareAgenda();">
        <tui-icon
          icon="@tui.share-2"
          [style.color]="'var(--tui-background-accent-1)'"/>
        Agenda delen
      </button>
      <button tuiOption class="dropdown-item" (click)="switchAgenda();" [disabled]="true">
        <tui-icon
          icon="@tui.arrow-left-right"
          [style.color]="'var(--tui-background-accent-1)'"/>
        Agenda wisselen
      </button>
    </tui-data-list>
  </div>

  <div>
    <div class="dropdown-section-title">Weergave Instellingen</div>
    <tui-data-list>
      <button tuiOption class="dropdown-item" (click)="setView('day');">
        <tui-icon
          icon="@tui.check"
          *ngIf="currentView == 'day'"
          [style.color]="'var(--tui-background-accent-1)'"/>
        Dagweergave
      </button>
      <button tuiOption class="dropdown-item" (click)="setView('week');">
        <tui-icon
          icon="@tui.check"
          *ngIf="currentView == 'week'"
          [style.color]="'var(--tui-background-accent-1)'"/>
        Weekweergave
      </button>
      <button tuiOption class="dropdown-item" (click)="setView('month');" [disabled]="true">
        <tui-icon
          icon="@tui.check"
          *ngIf="currentView == 'month'"
          [style.color]="'var(--tui-background-accent-1)'"/>
        Jaarweergave
      </button>
    </tui-data-list>
  </div>
</div>