browser/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html

<div class="tw-mb-4 tw-flex tw-items-start tw-justify-between">
  <div>
    <bit-breadcrumbs *ngIf="showBreadcrumbs">
      <bit-breadcrumb
        [route]="[]"
        [queryParams]="{ organizationId: organization.id, collectionId: null }"
        queryParamsHandling="merge"
      >
        {{ organization.name }}
        <span *ngIf="!organization.flexibleCollections">
          {{ "vault" | i18n | lowercase }}
        </span>
        <span *ngIf="organization.flexibleCollections">
          {{ "collections" | i18n | lowercase }}
        </span>
      </bit-breadcrumb>
      <ng-container>
        <bit-breadcrumb
          *ngFor="let collection of collections"
          icon="bwi-collection"
          [route]="[]"
          [queryParams]="{ collectionId: collection.id }"
          queryParamsHandling="merge"
        >
          {{ collection.name }}
        </bit-breadcrumb>
      </ng-container>
    </bit-breadcrumbs>
    <h1 class="tw-mb-0 tw-mt-1 tw-flex tw-items-center tw-space-x-2">
      <i
        *ngIf="filter.collectionId !== undefined"
        class="bwi bwi-collection"
        aria-hidden="true"
      ></i>
      <span>{{ title }}</span>
      <ng-container *ngIf="collection !== undefined && (canEditCollection || canDeleteCollection)">
        <button
          bitIconButton="bwi-angle-down"
          [bitMenuTriggerFor]="editCollectionMenu"
          size="small"
          type="button"
          aria-haspopup
        ></button>
        <bit-menu #editCollectionMenu>
          <button
            type="button"
            *ngIf="canEditCollection"
            bitMenuItem
            (click)="editCollection(CollectionDialogTabType.Info)"
          >
            <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
            {{ "editInfo" | i18n }}
          </button>
          <button
            type="button"
            *ngIf="canEditCollection"
            bitMenuItem
            (click)="editCollection(CollectionDialogTabType.Access)"
          >
            <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
            {{ "access" | i18n }}
          </button>
          <button
            type="button"
            *ngIf="canDeleteCollection"
            bitMenuItem
            (click)="deleteCollection()"
          >
            <span class="tw-text-danger">
              <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
              {{ "delete" | i18n }}
            </span>
          </button>
        </bit-menu>
      </ng-container>
      <small *ngIf="loading">
        <i
          class="bwi bwi-spinner bwi-spin text-muted"
          title="{{ 'loading' | i18n }}"
          aria-hidden="true"
        ></i>
        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
      </small>
    </h1>
  </div>

  <div *ngIf="filter.type !== 'trash' && filter.collectionId !== Unassigned" class="tw-shrink-0">
    <div *ngIf="organization.canCreateNewCollections" appListDropdown>
      <button
        bitButton
        buttonType="primary"
        type="button"
        [bitMenuTriggerFor]="addOptions"
        id="newItemDropdown"
        appA11yTitle="{{ 'new' | i18n }}"
      >
        {{ "new" | i18n }}<i class="bwi bwi-angle-down tw-ml-2" aria-hidden="true"></i>
      </button>
      <bit-menu #addOptions aria-labelledby="newItemDropdown">
        <button type="button" bitMenuItem (click)="addCipher()">
          <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>
          {{ "item" | i18n }}
        </button>
        <button type="button" bitMenuItem (click)="addCollection()">
          <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
          {{ "collection" | i18n }}
        </button>
      </bit-menu>
    </div>
    <button
      *ngIf="!organization.canCreateNewCollections"
      type="button"
      bitButton
      buttonType="primary"
      (click)="addCipher()"
    >
      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
      {{ "newItem" | i18n }}
    </button>
  </div>
</div>