<div class="main-container">
  <div class="dropdown shadow-none d-flex justify-content-center">
    <button
      class="
        btn btn-secondary
        dropdown-toggle
        shadow-none
        Sr-16
        d-flex
        align-items-center
      "
      type="button"
      id="dropdownMenu2"
      data-bs-toggle="dropdown"
      aria-expanded="false"
      [ngStyle]="{ color: getTextColor() }"
    >
      <ion-icon
        class="me-3"
        *ngIf="name == 'Consumibles'"
        name="restaurant-outline"
      ></ion-icon>
      <ion-icon
        class="me-3"
        *ngIf="name == 'Tiendas'"
        name="storefront-outline"
      ></ion-icon>
      <ion-icon
        class="me-3"
        *ngIf="name == 'Más'"
        name="apps-outline"
      ></ion-icon>
      {{ name }}
    </button>
    <ul *ngIf="name == 'Consumibles'" class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
      <li *ngFor="let element of consumables">
        <button class="dropdown-item" type="button">
          <ion-icon [name]="element.icon"></ion-icon>
          {{ element.name }}
        </button>
      </li>
    </ul>
    <ul *ngIf="name == 'Tiendas'" class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
      <li *ngFor="let element of stores">
        <button class="dropdown-item" type="button">
          <ion-icon [name]="element.icon"></ion-icon>
          {{ element.name }}
        </button>
      </li>
    </ul>
    <ul *ngIf="name == 'Más'" class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
      <li *ngFor="let element of more">
        <button class="dropdown-item" type="button">
          <ion-icon [name]="element.icon"></ion-icon>
          {{ element.name }}
        </button>
      </li>
    </ul>
  </div>
</div>