<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div style="padding-top:0px;">
    <div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected': 'sp-navbar-item'"
         *ngFor="let item of menu" style="min-width:0px;padding:0px;padding-top:5px;padding-bottom:5px;">
        <button mat-button mat-icon-button class="button-margin-iconbar" (click)="go(item.link)"
                matTooltip="{{item.title}}" matTooltipPosition="right">
            <mat-icon [ngClass]="item.link === activePage ? 'sp-navbar-icon-selected' : 'sp-navbar-icon'">
                {{item.icon}}
            </mat-icon>
        </button>
    </div>
    <div [ngClass]="'notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
         style="padding-top:5px;padding-bottom:5px;">
        <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar"
                (click)="go('notifications')"
                matTooltip="Notifications" matTooltipPosition="right">
            <mat-icon [matBadge]="NotificationCountService.unreadNotificationCount" [matBadgeHidden]="NotificationCountService.unreadNotificationCount == 0" [ngClass]="'notifications' === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">chat
            </mat-icon>
        </button>
    </div>
    <mat-divider style="border-top-color:white;"></mat-divider>
    <div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
         *ngFor="let item of admin" style="padding-top:5px;padding-bottom:5px;">
        <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar" (click)="go(item.link)"
                matTooltip="{{item.title}}">
            <mat-icon
                    [ngClass]="item.link === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">{{item.icon}}</mat-icon>
        </button>
    </div>
</div>