From 90003ad1e0342fc6e87b844fbbb05870ac128308 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 16:15:53 +0200
Subject: Fixed navbar component not handling logged out user properly

---
 src/app/components/navbar/navbar.component.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

(limited to 'src/app/components/navbar/navbar.component.html')

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 2d386aa..6bd3e66 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,9 +1,12 @@
 <nav id="navbar">
 	<div id="nav-contents" class="flex-row padding-smaller flex-center-align-items">
-		<div id="nav-profile-picture" class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()">
+		<div class="flexible" *ngIf="!loggedIn">
+			<!-- This element serves as a spacer -->
+		</div>
+		<div id="nav-profile-picture" class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
 			<img class="round-image" [src]="user.profilePictureURL">
 		</div>
-		<div id="nav-username" class="font-size-dot9 nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()">
+		<div id="nav-username" class="font-size-dot9 nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
 			<div class="padding-small">
 				Konstantin
 			</div>
@@ -26,11 +29,17 @@
 		<div class="flexible">
 			<!-- This element serves as a spacer -->
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()">
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()" *ngIf="loggedIn">
 			<img src="/assets/icons/tabler-icon-settings.svg">
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()">
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()" *ngIf="loggedIn">
 			<img src="/assets/icons/tabler-icon-logout.svg">
 		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToLogin()" *ngIf="!loggedIn">
+			<img src="/assets/icons/tabler-icon-login.svg">
+		</div>
+		<div class="flexible" *ngIf="!loggedIn">
+			<!-- This element serves as a spacer -->
+		</div>
 	</div>
 </nav>
-- 
cgit v1.2.3