<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark indigo scrolling-navbar ie-nav" [containerInside]="false">
	<logo>
		<a class="logo navbar-brand" routerLink="/">
			<img id="logo" src="./assets/images/codiki.png" alt="logo" />
			<span id="title" *ngIf="!title">Codiki</span>
			<span id="title" *ngIf="title">Codiki - {{title}}</span>
		</a>
	</logo>
	<links>
		<div class="navbar-nav ml-auto nav-flex-icons">
			<app-search-bar></app-search-bar>
		</div>
		<ul class="navbar-nav ml-auto nav-flex-icons" style="margin-left: 0 !important;">
			<li class="nav-item" *ngIf="!isAuthenticated()">
				<a routerLink="/login" class="nav-link waves-light" mdbRippleRadius>
					<i class="fa fa-sign-in"></i> Connexion
				</a>
      </li>
			<li class="nav-item dropdown" dropdown *ngIf="isAuthenticated()">
				<a dropdownToggle
						mdbRippleRadius
						type="button"
						class="nav-link waves-light"
						mdbTooltip="Mon compte"
						placement="bottom"
						mdbRippleRadius>
					<img id="user-profile-img"
							[src]="getConnectedUserImage()"
							(error)="onUserProfileLoadingError($event)"/>
				</a>
				<div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
					<a class="dropdown-item waves-light" mdbRippleRadius routerLink="/myPosts">
						<i class="fa fa-list-alt"></i> Mes articles
					</a>
					<a class="dropdown-item waves-light" mdbRippleRadius routerLink="/accountSettings">
						<i class="fa fa-cog"></i> Paramètres
					</a>
					<a class="dropdown-item waves-light danger-color-dark" mdbRippleRadius routerLink="/disconnection">
						<span class="white-text">
							<i class="fa fa-sign-out-alt"></i> Déconnexion
						</span>
					</a>
				</div>
			</li>
		</ul>
		<a (click)="openSidebar()">
			<i id="sidebarButton" class="fa fa-lg fa-bars white-text"></i>
		</a>
	</links>
</mdb-navbar>

<div id="sidenav" class="sidenav">
	<h3>Catégories</h3>
	<a class="closebtn" (click)="closeSidebar()">
		<i class="fa fa-chevron-left"></i>
	</a>
	<div *ngFor="let category of listCategories">
		<a [id]="'category-' + category.id"
				class="collapsible"
				*ngIf="!!category.listSubCategories && category.listSubCategories.length"
				(click)="openCategoriesLinks(category)">
			{{category.name}} <i class="fa {{accordionOpenned[category.id] ? 'fa-chevron-down' : 'fa-chevron-right'}} float-right"></i>
		</a>
		<div class="categoriesLinks" >
			<a *ngFor="let subCategory of category.listSubCategories"
					(click)="openPostsByCategory(subCategory.id)">
				{{subCategory.name}}
			</a>
		</div>
	</div>
</div>

<div id="overlay" (click)="closeSidebar()"></div>
