diff options
Diffstat (limited to 'frontend/src/app/_elements/navbar')
| -rw-r--r-- | frontend/src/app/_elements/navbar/navbar.component.css | 8 | ||||
| -rw-r--r-- | frontend/src/app/_elements/navbar/navbar.component.html | 34 | ||||
| -rw-r--r-- | frontend/src/app/_elements/navbar/navbar.component.ts | 5 |
3 files changed, 21 insertions, 26 deletions
diff --git a/frontend/src/app/_elements/navbar/navbar.component.css b/frontend/src/app/_elements/navbar/navbar.component.css index e69de29b..fcfad876 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.css +++ b/frontend/src/app/_elements/navbar/navbar.component.css @@ -0,0 +1,8 @@ +.dropdown-item:hover { + background-color: var(--ns-primary); +} + +h4 { + margin-top: 0.82rem; + margin-right: 10px; +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 7d0c4cd8..105151aa 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -1,35 +1,23 @@ -<header class="sticky-top p-3 bg-dark text-white"> +<header class="text-offwhite" style="background-color: #002b49;"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> - <img src="../../../assets/svg/logo_no_text.svg" class="bi me-2" width="64" height="40"> + <img src="../../../assets/images/logo.png" class="bi me-2" width="64" height="64"> + <h4>Igr<span class="highlight">ann</span>onica</h4> </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> - <li><a routerLink="" class="nav-link px-2" - [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li> - <li><a routerLink="experiment" class="nav-link px-2" - [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a> + <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-primary' : 'text-offwhite'">Napravi eksperiment</a> </li> - <li><a routerLink="training" class="nav-link px-2" - [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a> - </li> - <li><a routerLink="my-predictors" class="nav-link px-2" - [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a> + <li><a routerLink="archive" class="nav-link px-2" [class]="(currentUrl === '/archive') ? 'text-primary' : 'text-offwhite'">Arhiva</a> </li> </ul> <div *ngIf="shared.loggedIn" class="dropdown text-end"> - <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" - data-bs-toggle="dropdown" aria-expanded="false"> - <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" - class="rounded-circle"> + <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle"> </a> - <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" - style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" - data-popper-placement="bottom-end"> - <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li> - <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li> + <ul class="dropdown-menu text-small ns-bg-dark-100" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end"> <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li> <li> <hr class="dropdown-divider"> @@ -38,12 +26,10 @@ </ul> </div> <div *ngIf="!shared.loggedIn" class="dropdown text-end"> - <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" - data-bs-target="#modalForLogin"> + <button type="button" mat-raised-button color="accent" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin"> Prijavi se </button> - <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" - data-bs-target="#modalForRegister"> + <button type="button" mat-raised-button color="accent" data-bs-toggle="modal" data-bs-target="#modalForRegister"> Registruj se </button> </div> diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts index 368508ed..e2551f7a 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.ts +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Location } from '@angular/common'; import { AuthService } from '../../_services/auth.service'; import shared from 'src/app/Shared'; @@ -8,7 +8,8 @@ import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', - styleUrls: ['./navbar.component.css'] + styleUrls: ['./navbar.component.css'], + encapsulation: ViewEncapsulation.Emulated }) export class NavbarComponent implements OnInit { |