<div class="logo sidebar-nav">
	<a [routerLink]=" ['/home']">
		<div class="logo-img">
			<img src="/assets/images/OpenDMP.png" />
		</div>
	</a>
</div>
<div class="sidebar-wrapper">

	<!-- MOBILE MENU -->

	<!-- <div *ngIf="isMobileMenu()"> -->
	<div>
		<!-- Search -->
		<!-- <form class="navbar-form">
			<span class="bmd-form-group">
				<div class="input-group no-border">
					<input type="text" value="" class="form-control" placeholder="Search...">
					<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
						<i class="material-icons">search</i>
						<div class="ripple-container"></div>
					</button>
				</div>
			</span>
		</form> -->

		<!-- Login -->
		<ul class="nav navbar-nav nav-mobile-menu">
			<li class="nav-item">
				<a class="nav-link" *ngIf="isAuthenticated();else loginoption">
					<p style="display: flex; align-items: center;" [routerLink]=" ['/profile']">
						<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
						<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()">
						<span class="d-lg-none d-md-block">{{ 'SIDE-BAR.ACCOUNT' | translate }}</span>
					</p>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" *ngIf="isAuthenticated()" (click)="logout()">
					<i class="material-icons">exit_to_app</i>
					<p class="login-label">{{ 'USER-DIALOG.LOG-OUT' | translate }}</p>
				</a>
			</li>
			<ng-template #loginoption>
				<a class="nav-link login" *ngIf="!isLoginRouteActivated()" [routerLink]=" ['/login'] ">
					<i class="material-icons">vpn_key</i>
					<p class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</p>
				</a>
			</ng-template>
		</ul>
	</div>

	<!-- END OF MOBILE MENU -->

	<!-- Sidebar Menu -->
	<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst;"
		[class.nav-list-item]="showItem(groupMenuItem)">
		<div *ngIf="showItem(groupMenuItem);">
			<hr *ngIf="!isFirst">
			<div *ngIf="isFirst" class="sidebarSubtitle firstSubtitle">
				<p>{{groupMenuItem.title | translate}}</p>
			</div>
			<div *ngIf="!isFirst" class="sidebarSubtitle">
				<p>{{groupMenuItem.title | translate}}</p>
			</div>
			<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes"
				class="{{groupMenuRoute.class}} nav-item">
				<a class="nav-link" [routerLink]="[groupMenuRoute.path]">
					<i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i>
					<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
					<p>{{groupMenuRoute.title | translate}}</p>
				</a>
			</li>
		</div>
	</ul>
	<!-- Sidebar Footer -->
	<div class="sidebar-footer">
		<app-sidebar-footer></app-sidebar-footer>
	</div>
</div>
