Skip to content
This repository was archived by the owner on Oct 24, 2023. It is now read-only.

made toolbar responsive when there are more items #199

Open
minodora-c wants to merge 3 commits into
base: master
Choose a base branch
from
Open

made toolbar responsive when there are more items #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89ac391
responsive toolbar
minodora-c Mar 3, 2022
6105f33
adjusted top bar #187
minodora-c Mar 4, 2022
e31b6d3
cleanup
minodora-c Mar 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 30 additions & 22 deletions src/app/top-bar/top-bar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
<header *ngIf="authService.isAuthenticated()">
<nav class=" yellow container-full-height">
<div class="flex-container container flex-row">

<div class="px-3 bg-white">
<a (click)="goToDashboard()" class=" navbar-brand logo" href="javascript:void(0);">
<a (click)=" goToDashboard()" class=" navbar-brand logo" href="javascript:void(0);">
<img src="../../assets/images/DSU_logo.PNG">
</a>
</div>

<div class="row" style="width: 100%; margin: 0">
<div class="flex-column pr-3 d-none d-xl-block col-xl-10 pl-0">
<ul class="nav">

<div id="divVisibleLinks" class="flex-column d-none d-sm-flex col-sm-7 col-md-8 col-lg-9 col-xl-9">
<ul class="nav" id="ulVisibleLinks">
<li>
<a routerLink="/volunteers" class="nav__link" routerLinkActive="active-link">Voluntari</a>
</li>
<li *ngIf="authService.is('DSU', 'NGO')">
<a routerLink='/resources' class="nav__link" routerLinkActive="active-link">Resurse</a>
</li>
<li *ngIf="authService.is('DSU')">
<a routerLink='/organisations' class="nav__link" routerLinkActive="active-link">Organizații</a>
<a routerLink='/organisations' class="nav__link"
routerLinkActive="active-link">Organizații</a>
</li>
<li *ngIf="authService.is('DSU', 'INS')">
<a routerLink='/users' class="nav__link" routerLinkActive="active-link">Utilizatori</a>
Expand All @@ -29,25 +33,29 @@
</li>
</ul>
</div>
<div class="navbar-btn flex-row d-flex justify-end align-center col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-2 pr-4 pl-0">
<div ngbDropdown class="d-inline-block">
<div class="userarea" id="dropdown1" ngbDropdownToggle>
<app-current-profile></app-current-profile>
</div>
<div ngbDropdownMenu aria-labelledby="dropdown1">
<button ngbDropdownItem [routerLink]="['users', 'id', authService.user._id]">Profil</button>
<button ngbDropdownItem routerLink='/volunteers' class="hidden-button">Voluntari</button>
<button *ngIf="authService.is('DSU', 'NGO')" ngbDropdownItem routerLink='/resources' class="hidden-button">Resurse</button>
<button *ngIf="authService.is('DSU')" ngbDropdownItem routerLink='/organisations' class="hidden-button">Organizații</button>
<button *ngIf="authService.is('DSU', 'INS')" ngbDropdownItem routerLink='/users' class="hidden-button">Utilizatori</button>
<button *ngIf="authService.is('DSU')" ngbDropdownItem routerLink='/map' class="hidden-button">Hartă</button>
<button ngbDropdownItem routerLink='/info' class="hidden-button">Info</button>
<div class="dropdown-divider"></div>
<button ngbDropdownItem (click)="logout()">Delogare</button>
</div>
</div>

<div class="nav flex-row d-flex align-center col-4 col-sm-1 col-md-1 col-lg-1 col-xl-1">
<div ngbDropdown class="px-0 nav-btn-drop d-inline-block">
<div class="nav-btn" id="nav-btn" ngbDropdownToggle></div>
<div ngbDropdownMenu id="divHiddenLinks" class="yellow">
<ul class="nav" id="ulHiddenLinks"></ul>
</div>
</div>
</div>

<div class="navbar-btn flex-row d-flex justify-end align-center col-8 col-sm-4
col-md-3 col-lg-2 col-xl-2">
<div ngbDropdown class="d-inline-block">
<div class="userarea" id="dropdown1" ngbDropdownToggle>
<app-current-profile></app-current-profile>
</div>
<div ngbDropdownMenu aria-labelledby="dropdown1">
<button ngbDropdownItem [routerLink]="['users', 'id', authService.user._id]">Profil</button>
<button ngbDropdownItem (click)="logout()">Delogare</button>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
</header>
34 changes: 23 additions & 11 deletions src/app/top-bar/top-bar.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,28 @@ header {
color: #fff;
}

.nav .nav-btn-drop:hover {
background-color: #264998;
color: #fff;
}

#ulHiddenLinks li,
#ulHiddenLinks li a {
width: 100%;
}

.nav-btn {
width: 3rem;
text-align: center;
}

@media only screen and (max-width: 575px) {
.nav-btn {
width: 5rem;
text-align: center;
}
}

.yellow {
background-color:rgb(243, 217, 115 );
}
Expand All @@ -62,16 +84,6 @@ header {
height: 100%;
}

.hidden-button {
display: none;
}

@media (max-width: 1199px) {
.hidden-button {
display: block;
}
}

.dropdown-item:active {
background-color: gray;
}
Expand All @@ -84,4 +96,4 @@ header {
.active-link {
background-color: #264998;
color: #fff!important;
}
}
103 changes: 85 additions & 18 deletions src/app/top-bar/top-bar.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, HostListener } from '@angular/core';
import { AuthenticationService } from '@app/core';
import { Router } from '@angular/router';

Expand All @@ -13,31 +13,98 @@ export class TopBarComponent implements OnInit {
* top bar to be shown over all the other components
*/
constructor(public authService: AuthenticationService,
private router: Router) {}
private router: Router) { }

ngOnInit() { }
ngOnInit() { }

/**
* logout from account
*/
ngAfterViewInit() {
this.onResized();
}

@HostListener('window:resize', ['$event'])
onResize() {
this.onResized();
}

onResized() {
var btn = document.getElementById("nav-btn");
var vlinks = document.getElementById("ulVisibleLinks");
var vlinksChildren = vlinks.getElementsByTagName("li");
var hlinks = document.getElementById("ulHiddenLinks");
var hlinksChildren = hlinks.getElementsByTagName("li");

var numVisibleItems = 0;
var totalItems = vlinksChildren.length + hlinksChildren.length;
var totalSpace = document.getElementById("divVisibleLinks").clientWidth - 30;
var usedSpace = 0;
var remainingSpace = totalSpace - usedSpace;

// get all links in one array
var initiallength = hlinksChildren.length;
for (var k = 0; k < initiallength; k++) {
vlinks.append(hlinksChildren[0]);
}

// set visible links
for (var i = 0; i < vlinksChildren.length; i++) {
if (vlinksChildren[i].clientWidth < remainingSpace) {
usedSpace += vlinksChildren[i].clientWidth;
remainingSpace = totalSpace - usedSpace;
numVisibleItems++;
} else {
break;
}
}

// set hidden links
for (var j = vlinksChildren.length - 1; j >= numVisibleItems; j--) {
hlinks.prepend(vlinksChildren[j]);
}

// update height of dropdown menu
var divHiddenLinks = document.getElementById("divHiddenLinks");
var newHeight = hlinksChildren.length * 60 + 20 + 'px';
divHiddenLinks.style.height = newHeight;

// if no items visible, add 'Menu' to button
if (numVisibleItems == 0) {
btn.innerText = "Menu";
} else {
btn.innerText = "";
}

// if all items visible, hide the button
if (numVisibleItems == totalItems) {
btn.classList.add("d-none");
divHiddenLinks.classList.add("d-none");
} else {
btn.classList.remove("d-none");
divHiddenLinks.classList.remove("d-none");
}
}

/**
* logout from account
*/
logout() {
this.authService.logout().subscribe(
(didlogout: Boolean) => {
if (didlogout) {
this.router.navigate(['/login']);
}
},
(error: any) => {
console.log('logout error: ', error);
});
}
(didlogout: Boolean) => {
if (didlogout) {
this.router.navigate(['/login']);
}
},
(error: any) => {
console.log('logout error: ', error);
});
}

/**
* go to home path on icon click
*/
/**
* go to home path on icon click
*/
goToDashboard() {
this.router.navigate(['/' + this.authService.homePath()], {
replaceUrl: true
});
}

}