From a9358fb8a27cd3d48547f5427797702ee2780de8 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 16:02:43 +0200
Subject: Implemented navbar component; added some global stylings and changed
 the name of others; added icons

---
 src/app/components/navbar/navbar.component.html | 36 +++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/app/components/navbar/navbar.component.html

(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
new file mode 100644
index 0000000..2d386aa
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.html
@@ -0,0 +1,36 @@
+<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()">
+			<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 class="padding-small">
+				Konstantin
+			</div>
+		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToFeed()">
+			<img src="/assets/icons/tabler-icon-home.svg">
+		</div>
+		<div class="nav-item flex-col border-radius-small 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-small 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-small 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-small light-hover hover-half-opacity click-effect" (click)="goToSettings()">
+			<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()">
+			<img src="/assets/icons/tabler-icon-logout.svg">
+		</div>
+	</div>
+</nav>
-- 
cgit v1.2.3