Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

3 files changed, 146 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..d02e928
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.css
@@ -0,0 +1,38 @@
+#navbar {
+  height: var(--navbar-height);
+  width: 100%;
+  background-color: var(--card-bg);
+}
+
+#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..d05f6e1
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.html
@@ -0,0 +1,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>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
new file mode 100644
index 0000000..14b8f52
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.ts
@@ -0,0 +1,63 @@
+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;
+  public loggedIn: Boolean;
+
+  constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService)
+  { }
+
+  ngOnInit(): void {
+    this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
+
+    this.user = this._userService.getDefaultUser();
+
+    if (this.loggedIn) {
+      this._userService.getUserFromSessionStorageRequest().subscribe({
+        next: (res: object) => {
+          Object.assign(this.user, res);
+        },
+      });
+    }
+  }
+
+  goToProfile(): void {
+    // Properly reload the page
+    // Needed because if you're on someone's profile and go to yours, angular won't refresh the page (with your info)
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+
+    this._router.navigate(['/profile/' + this.user.userName]);
+  }
+
+  goToFeed(): void {
+    if (this.loggedIn) {
+      this._router.navigate(['/']);
+    }
+    else {
+      this.goToLogin();
+    }
+  }
+
+  goToSettings(): void {
+    this._router.navigate(['/profile/' + this.user.userName + '/settings']);
+  }
+
+  logout(): void {
+    this._tokenService.logoutUserFromSessionStorage();
+    this.goToLogin();
+  }
+
+  goToLogin(): void {
+    this._router.navigate(['/login']);
+  }
+}