Implemented navbar component; added some global stylings and changed the name of others; added icons

3 files changed, 128 insertions, 0 deletions

diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
new file mode 100644
index 0000000..58ec821
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.css
@@ -0,0 +1,43 @@
+#navbar {
+  width: 100%;
+  background-color: var(--card-bg);
+}
+
+#nav-contents {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+#nav-contents img {
+  height: 1.9em;
+  width: 1.9em;
+}
+
+@media screen and (max-width: 30rem) {
+  #nav-username {
+    display: none;
+  }
+
+  #navbar {
+    font-size: 0.8em;
+  }
+}
+
+#nav-profile-picture {
+  padding: 0.1em;
+}
+
+#nav-profile-picture img {
+  height: 1.8em;
+  width: 1.8em;
+}
+
+.nav-item {
+  margin-left: 0.2em;
+  padding: 0 0.1em;
+}
+
+.nav-item:first-child {
+  margin-left: 0;
+}
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>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
new file mode 100644
index 0000000..4af7a8a
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { TokenService } from 'src/app/services/token.service';
+import { UserService } from 'src/app/services/user.service';
+import { User } from 'src/models/identity/user.model';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+  public user: User;
+
+  constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService)
+  { }
+
+  ngOnInit(): void {
+    if (!this._tokenService.getTokenFromSessionStorage()) {
+      this._router.navigate(['/login']);
+      return;
+    }
+
+    this.user = this._userService.getDefaultUser();
+
+    this._userService.getUserFromSessionStorageRequest().subscribe({
+      next: (res: object) => {
+        Object.assign(this.user, res);
+      },
+    });
+  }
+
+  goToProfile(): void {
+    this._router.navigate(['/profile/' + this.user.userName]);
+  }
+
+  goToFeed(): void {
+    this._router.navigate(['/']);
+  }
+
+  goToSettings(): void {
+    this._router.navigate(['/profile/' + this.user.userName + '/settings']);
+  }
+
+  logout(): void {
+    this._tokenService.logoutUserFromSessionStorage();
+    this._router.navigate(['/login']);
+  }
+}