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

@@ -5,8 +5,8 @@
 
 #logo {
 	width: 30px;
-    height: 30px;
+	height: 30px;
-    margin-top: -7px;
+	margin-top: -7px;
 	vertical-align: middle;
 	margin-right: 10px;
 }
@@ -17,25 +17,25 @@
 
 /* The side navigation menu */
 .sidenav {
-    height: 100%; /* 100% Full-height */
+	height: 100%; /* 100% Full-height */
-    width: 0; /* 0 width - change this with JavaScript */
+	width: 0; /* 0 width - change this with JavaScript */
-    position: fixed; /* Stay in place */
+	position: fixed; /* Stay in place */
-    z-index: 1000; /* Stay on top */
+	z-index: 1050; /* Stay on top */
-    top: 0; /* Stay at the top */
+	top: 0; /* Stay at the top */
-    left: 0;
+	left: 0;
-    background-color: #3f51b5;
+	background-color: #3f51b5;
-    overflow-x: hidden; /* Disable horizontal scroll */
+	overflow-x: hidden; /* Disable horizontal scroll */
-    padding-top: 20px; /* Place content 60px from the top */
+	padding-top: 20px; /* Place content 60px from the top */
-    transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
+	transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
 }
 
 /* The navigation menu links */
 .sidenav a {
-    padding: 8px 32px 8px 32px;
+	padding: 8px 32px 8px 32px;
-    text-decoration: none;
+	text-decoration: none;
-    color: white;
+	color: white;
-    display: block;
+	display: block;
-    transition: 0.3s;
+	transition: 0.3s;
 }
 
 /* When you mouse over the navigation links, change their color */
@@ -45,47 +45,51 @@
 }
 
 .sidenav h3 {
-    padding: 8px 8px 8px 32px;
+	padding: 8px 8px 8px 32px;
-    color: white;
+	color: white;
-    padding-bottom: 25px;
+	padding-bottom: 25px;
-    border-bottom: 1px solid #5c6bc0;
+	border-bottom: 1px solid #5c6bc0;
 }
 /* Position and style the close button (top right corner) */
 .sidenav .closebtn {
-    position: absolute;
+	position: absolute;
-    top: 25px;
+	top: 25px;
-    right: 25px;
+	right: 25px;
-    margin-left: 50px;
+	margin-left: 50px;
-    padding: 8px;
+	padding: 8px;
 }
 
 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 @media screen and (max-height: 450px) {
-    .sidenav {padding-top: 15px;}
+	.sidenav {padding-top: 15px;}
-    .sidenav a {font-size: 18px;}
+	.sidenav a {font-size: 18px;}
 }
 
 #overlay {
-    position: fixed; /* Sit on top of the page content */
+	position: fixed; /* Sit on top of the page content */
-    display: none; /* Hidden by default */
+	display: none; /* Hidden by default */
-    width: 100%; /* Full width (cover the whole page) */
+	width: 100%; /* Full width (cover the whole page) */
-    height: 100%; /* Full height (cover the whole page) */
+	height: 100%; /* Full height (cover the whole page) */
-    top: 0;
+	top: 0;
-    left: 0;
+	left: 0;
-    right: 0;
+	right: 0;
-    bottom: 0;
+	bottom: 0;
-    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
 	z-index: 999; /* Specify a stack order in case you're using a different order for other elements */
 	transition: 0.5s;
 }
 
 .categoriesLinks {
-    background-color: #303f9f;
+	background-color: #303f9f;
-    max-height: 0;
+	max-height: 0;
-    overflow: hidden;
+	overflow: hidden;
-    transition: max-height 0.2s ease-out;
+	transition: max-height 0.2s ease-out;
 }
 
 .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;
 		}
 	}
 }