<div *ngIf="pluginsNotifications">
  <app-plugin-ui *ngFor="let plugin of pluginsNotifications.plugins" class="plugin-ui-notifications-wrapper hide-lt-lg"
                 [plugin]="plugin.plugin" [panelName]="panel" componentName="PluginNotifications"
                 [componentData]="plugin">
  </app-plugin-ui>
  <div matRipple [matRippleDisabled]="true" [matMenuTriggerFor]="menu" class="plugins-notifications-dropdown hide-gt-md"
       [attr.fl-tooltip]="pluginsTooltip" fl-tooltip-direction="down">
    <app-icon [icon]="{name: 'plugins', class: 'fl-icons'}">
    </app-icon>
    <div *ngIf="pluginsNotifications.total_notification_count > 0" class="notification-circle">
      {{pluginsNotifications.total_notification_count}}
    </div>
  </div>
  <mat-menu class="hide-gt-md" #menu="matMenu" xPosition="before" yPosition="below">
    <app-plugin-ui *ngFor="let plugin of pluginsNotifications.plugins"
                   [plugin]="plugin.plugin" [panelName]="panel" componentName="PluginNotifications"
                   [componentData]="plugin">
    </app-plugin-ui>
  </mat-menu>
</div>
