src/app/components/navbar/navbar.component.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<nav id="navbar">
	<div id="nav-contents" class="centered-content flex-row padding-dot3 flex-center-align-items">
		<div class="nav-item border-radius-dot2 flex-row flex-center-align-items light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
			<div id="nav-profile-picture" class="flex-col">
				<img class="round-image" [src]="user.profilePictureURL">
			</div>
			<div id="nav-username" class="font-size-dot9 flex-col">
				<div class="padding-dot2">
					@{{ user.userName }}
				</div>
			</div>
		</div>
		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" (click)="goToFeed()" *ngIf="loggedIn">
			<img src="/assets/icons/tabler-icon-home.svg">
		</div>
		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none">
			<!-- Trending functionality isn't implemented yet! -->
			<img src="/assets/icons/tabler-icon-trending-up.svg">
		</div>
		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none">
			<!-- Chat functionality isn't implemented yet! -->
			<img src="/assets/icons/tabler-icon-message-circle.svg">
		</div>
		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none">
			<!-- Search functionality isn't implemented yet! -->
			<img src="/assets/icons/tabler-icon-search.svg">
		</div>
		<div class="flexible">
			<!-- This element serves as a spacer -->
		</div>
		<div class="nav-item flex-col border-radius-dot2 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-dot2 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-row flex-center-align-items border-radius-dot2 light-hover hover-half-opacity click-effect side-padding-dot3" (click)="goToLogin()" *ngIf="!loggedIn">
			Login&nbsp;
			<img src="/assets/icons/tabler-icon-login.svg">
		</div>
		<div class="flexible" *ngIf="!loggedIn">
			<!-- This element serves as a spacer -->
		</div>
	</div>
</nav>