Add design update to the aside from header component.

src/main/ts-v7/src/app/header/header.component.html

@@ -48,7 +48,7 @@
 	</a>
 	<div *ngFor="let category of listCategories">
 		<a [id]="'category-' + category.id" class="collapsible" *ngIf="category.listSubCategories.length" (click)="openCategoriesLinks(category)">
-			{{category.name}} <i class="fa fa-chevron-down pull-right"></i>
+			{{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"

src/main/ts-v7/src/app/header/header.component.scss

@@ -20,7 +20,7 @@
 	height: 100%; /* 100% Full-height */
 	width: 0; /* 0 width - change this with JavaScript */
 	position: fixed; /* Stay in place */
-    z-index: 1000; /* Stay on top */
+	z-index: 1050; /* Stay on top */
 	top: 0; /* Stay at the top */
 	left: 0;
 	background-color: #3f51b5;
@@ -89,3 +89,7 @@
 .dropdown-item.danger-color-dark:hover {
 	background-color: #ff4444 !important;
 }
+
+.collapsible i.fa {
+	padding-top: 4px;
+}

src/main/ts-v7/src/app/header/header.component.ts

@@ -16,6 +16,7 @@ export class HeaderComponent implements OnInit {
 	isAdmin: boolean;
 	listCategories: Array<Category> = [];
 	title: string;
+	accordionOpenned: Array<Boolean> = [];
 
 	constructor(
 		private authService: AuthService,
@@ -73,8 +74,10 @@ export class HeaderComponent implements OnInit {
 		const divContent = divCategoriesLinks.nextElementSibling as HTMLElement;
 		if (divContent.style.maxHeight) {
 			divContent.style.maxHeight = null;
+			this.accordionOpenned[category.id] = false;
 		} else {
 			divContent.style.maxHeight = divContent.scrollHeight + 'px';
+			this.accordionOpenned[category.id] = true;
 		}
 	}
 }