<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"
        size="large"
      ></ion-icon>
      <ion-icon
        class="me-3"
        *ngIf="name == 'Tiendas'"
        name="storefront-outline"
        size="large"
      ></ion-icon>
      <ion-icon
        class="me-3"
        *ngIf="name == 'Más'"
        name="apps-outline"
        size="large"
      ></ion-icon>
      {{ name }}
    </button>
    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
      <li *ngFor="let element of elements">
        <button class="dropdown-item" type="button">
          <fa-icon [icon]="element.icon"></fa-icon>
          {{ element.name }}
        </button>
      </li>
    </ul>
  </div>
</div>

<!-- <div class="dropdown" dropdown>
    <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
    <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
      <a class="dropdown-item"> Profile</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
    </div>
  </div> -->