machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ui] redesign UX for navbar

Browse Source
This commit is contained in:
nymkappa
2023-08-21 22:08:25 +02:00
parent 7674bee5ad
commit 30be7e0f7a
6 changed files with 65 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/components/master-page/master-page.component.html
View File

@@ -1,7 +1,8 @@
<app-menu *ngIf="servicesEnabled" (loggedOut)="onLoggedOut()"></app-menu>
<ng-container *ngIf="{ val: network$ | async } as network">
<header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">
<header *ngIf="headerVisible" class="sticky-header">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<!-- Hamburger -->
<ng-container *ngIf="servicesEnabled">
@@ -77,8 +78,6 @@
</nav>
</header>
<div class="content-padding"></div>
<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
<main>

15
frontend/src/app/components/master-page/master-page.component.scss
View File

@@ -1,3 +1,11 @@
.sticky-header {
position: sticky;
position: -webkit-sticky;
top: 0;
width: 100%;
z-index: 100;
}
li.nav-item.active {
background-color: #653b9c;
}
@@ -226,10 +234,3 @@ nav {
height: 35px;
border-radius: 10px;
}
.content-padding {
padding-top: 65px;
@media (max-width: 572px) {
padding-top: 100px;
}
}

50
frontend/src/app/components/menu/menu.component.html
View File

@@ -1,25 +1,31 @@
<div class="sidenav" [class]="navOpen ? 'open': 'close'">
<nav>
<span *ngIf="userAuth"><strong>@ {{ userAuth.user.username }}</strong></span>
<a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0" routerLink="/login" role="tab">
<fa-icon [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>
<span style="font-size: 20px;">Sign in</span>
</a>
<div class="sidenav" [class]="navOpen ? 'open': ''">
<div class="d-flex">
<ng-container *ngIf="userMenuGroups$ | async as menuGroups">
<div *ngFor="let group of menuGroups" style="height: max-content;">
<h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
<span>{{ group.title }}</span>
</h6>
<ul class="nav flex-column" *ngFor="let item of group.items">
<li class="nav-item d-flex justify-content-start align-items-center" (click)="onLinkClick()">
<fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
<button *ngIf="item.link === 'logout'" class="btn nav-link" role="tab" (click)="logout()">{{ item.title }}</button>
<a *ngIf="item.title !== 'Logout'" class="nav-link" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
</li>
</ul>
</div>
</ng-container>
<nav class="scrollable">
<span *ngIf="userAuth"><strong>@ {{ userAuth.user.username }}</strong></span>
<a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0" routerLink="/login" role="tab">
<fa-icon [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>
<span style="font-size: 20px;">Sign in</span>
</a>
<ng-container *ngIf="userMenuGroups$ | async as menuGroups">
<div *ngFor="let group of menuGroups" style="height: max-content;">
<h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
<span>{{ group.title }}</span>
</h6>
<ul class="nav flex-column" *ngFor="let item of group.items">
<li class="nav-item d-flex justify-content-start align-items-center" (click)="onLinkClick(item.link)">
<fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
<button *ngIf="item.link === 'logout'" class="btn nav-link" role="tab" (click)="logout()">{{ item.title }}</button>
<a *ngIf="item.title !== 'Logout'" class="nav-link" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
</li>
</ul>
</div>
</ng-container>
</nav>
<div id="empty-area" style="flex-grow: 1"></div>
</div>
</nav>
</div>

42
frontend/src/app/components/menu/menu.component.scss
View File

@@ -1,22 +1,17 @@
.sidenav {
z-index: 10;
background-color: #1d1f31;
box-shadow: 0px 0px 15px 0px #000;
width: 225px;
height: calc(100vh - 65px);
z-index: 200;
background-color: transparent;
width: 100vw;
height: 100vh;
position: fixed;
left: -100vw;
top: 0;
transition: 0.25s;
}
.scrollable {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
left: -225px;
top: 65px;
transition: 0.25s;
@media (max-width: 991px) {
height: calc(100vh - 65px - 55px);
}
@media (max-width: 572px) {
top: 100px;
height: calc(100vh - 105px);
}
}
.sidenav.open {
@@ -25,7 +20,6 @@
.sidenav a, button{
text-decoration: none;
font-size: 20x;
color: lightgray;
margin-left: 20px;
display: block;
@@ -34,18 +28,16 @@
color: white;
}
.sidenav nav {
height: auto;
box-shadow: 0px 0px 15px 0px #000;
height: 100vh;
max-width: 250px;
background-color: #1d1f31;
padding-left: 20px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 50px;
@media (max-width: 572px) {
padding-bottom: 100px;
}
padding-top: 20px;
padding-bottom: 100px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

16
frontend/src/app/components/menu/menu.component.ts
View File

@@ -34,7 +34,6 @@ export class MenuComponent implements OnInit {
}
this.isServicesPage = this.router.url.includes('/services/');
this.navOpen = this.isServicesPage && !this.isSmallScreen();
}
isSmallScreen() {
@@ -51,20 +50,19 @@ export class MenuComponent implements OnInit {
});
}
onLinkClick() {
if (!this.isServicesPage || this.isSmallScreen()) {
this.navOpen = false;
}
onLinkClick(link) {
this.navOpen = false;
this.router.navigateByUrl(link);
}
hambugerClick() {
this.navOpen = !this.navOpen;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
if (this.isServicesPage) {
this.navOpen = !this.isSmallScreen();
@HostListener('window:click', ['$event'])
onClick(event) {
if (event.target.id === 'empty-area') {
this.navOpen = false;
}
}
}