diff options
| author | Kamen Mladenov <kamen.d.mladenov@protonmail.com> | 2021-03-22 20:52:19 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-22 20:52:19 +0200 |
| commit | 0cbe73007b9112bf7aa76e2584cb1fafc272dd5b (patch) | |
| tree | 69b9916c17b6675a1e33b1a180d5eb0615e4fb87 /src/app/components/navbar/navbar.component.html | |
| parent | 084238dfa39f31b3661362cbe8cdea44e8f05992 (diff) | |
| parent | cad20fc8c7d58860d7bf9c803da3a8fcea43396a (diff) | |
| download | DevHive-Angular-0cbe73007b9112bf7aa76e2584cb1fafc272dd5b.tar DevHive-Angular-0cbe73007b9112bf7aa76e2584cb1fafc272dd5b.tar.gz DevHive-Angular-0cbe73007b9112bf7aa76e2584cb1fafc272dd5b.zip | |
Merge pull request #3 from Team-Kaleidoscope/major-redesign
Major redesign
Diffstat (limited to 'src/app/components/navbar/navbar.component.html')
| -rw-r--r-- | src/app/components/navbar/navbar.component.html | 45 |
1 files changed, 45 insertions, 0 deletions
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 + <img src="/assets/icons/tabler-icon-login.svg"> + </div> + <div class="flexible" *ngIf="!loggedIn"> + <!-- This element serves as a spacer --> + </div> + </div> +</nav> |