<div class="sidebar-footer col-12">
	<div class="row ml-2">
		<div class="col-auto">
			<p class="option" (click)="navigate()" [ngClass]="{'option-active': this.router.url === '/about'}">
				{{'FOOTER.ABOUT' | translate}}</p>
		</div>
		<div class="col-auto ml-3">
			<p class="option" [routerLink]="['/terms-and-conditions']" [routerLinkActive]="['option-active']">
				{{'FOOTER.TERMS-OF-SERVICE' | translate}}</p>
		</div>
	</div>

	<div class="row ml-2">
		<div class="col-auto">
			<p class="option" [routerLink]="['/glossary']" [routerLinkActive]="['option-active']">
				{{'FOOTER.GLOSSARY' | translate}}</p>
			<!-- <p class="option" (click)="openGlossaryDialog()" [ngClass]="{'option-active': this.router.url === '/glossary'}">
				{{'FOOTER.GLOSSARY' | translate}}</p> -->
		</div>
		<div class="col-auto">
			<p class="option" [routerLink]="['/user-guide']" [routerLinkActive]="['option-active']">
				{{'FOOTER.GUIDE' | translate}}</p>
			<!-- <p class="option" (click)="openUserGuideDialog()" [ngClass]="{'option-active': this.router.url === '/user-guide'}">
										{{'FOOTER.GUIDE' | translate}}</p> -->
		</div>

		<!-- <div class="col-6 text-center">
			<p class="option" (click)="openFaqDialog()" [ngClass]="{'option-active': this.router.url === '/faq'}">
				{{'FOOTER.FAQ' | translate}}</p>
		</div> -->
	</div>
	<div class="row ml-2">
		<div *ngIf="isAuthenticated()" class="col-auto">
			<p class="option" [routerLink]="['/contact-support']" [routerLinkActive]="['option-active']">
				{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
			<!-- <p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
								{{'FOOTER.CONTACT-SUPPORT' | translate}}</p> -->
		</div>
		<!-- <div class="col-auto text-center">
			<a class="option" [routerLink]="['/privacy-policy']" [routerLinkActive]="['option-active']">
				<i class="fa fa-user-secret pr-2 pt-1"></i>
				{{'FOOTER.PRIVACY-POLICY' | translate}}</a>
		</div> -->
	</div>
</div>
