mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 22:58:30 +01:00
Code Issues Projects Releases Wiki Activity

[ui] redesign UX for navbar using sticky

Browse source
This commit is contained in:
nymkappa 2023-08-22 08:35:10 +02:00
parent 5005817529
commit 7544357826
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
5 changed files with 60 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/app/components/master-page/master-page.component.html
View file

@ -1,5 +1,3 @@
<app-menu *ngIf="servicesEnabled" (loggedOut)="onLoggedOut()"></app-menu>
<ng-container *ngIf="{ val: network$ | async } as network">
<header *ngIf="headerVisible" class="sticky-header">
@ -78,11 +76,18 @@
</nav>
</header>
<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
<div class="d-flex" style="overflow: clip">
<app-menu *ngIf="servicesEnabled" (loggedOut)="onLoggedOut()"></app-menu>
<main>
<router-outlet></router-outlet>
</main>
<div class="flex-grow-1">
<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
<main>
<router-outlet></router-outlet>
</main>
<app-global-footer *ngIf="footerVisible"></app-global-footer>
</div>
</div>
<app-global-footer *ngIf="footerVisible"></app-global-footer>
</ng-container>

34
frontend/src/app/components/menu/menu.component.html
View file

@ -1,31 +1,31 @@
<div class="sidenav" [class]="navOpen ? 'open': ''">
<div class="d-flex">
<div class="sidenav menu-click" [class]="navOpen ? 'open': ''">
<div class="d-flex menu-click">
<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>
<nav class="scrollable menu-click">
<span *ngIf="userAuth" class="menu-click">
<strong class="menu-click">@ {{ userAuth.user.username }}</strong>
</span>
<a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0 menu-click" routerLink="/login" role="tab">
<fa-icon class="menu-click" [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>
<span class="menu-click" 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>
<div class="menu-click" *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 menu-click">
<span class="menu-click">{{ 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>
<ul class="nav flex-column menu-click" *ngFor="let item of group.items" (click)="onLinkClick(item.link)">
<li class="nav-item d-flex justify-content-start align-items-center menu-click">
<fa-icon class="menu-click" [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
<button *ngIf="item.link === 'logout'" class="btn nav-link menu-click" role="tab" (click)="logout()">{{ item.title }}</button>
<a *ngIf="item.title !== 'Logout'" class="nav-link menu-click" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
</li>
</ul>
</div>
</ng-container>
</nav>
<div id="empty-area" style="flex-grow: 1"></div>
</div>
</div>

23
frontend/src/app/components/menu/menu.component.scss
View file

@ -1,12 +1,13 @@
.sidenav {
z-index: 200;
z-index: 1;
background-color: transparent;
width: 100vw;
height: 100vh;
position: fixed;
left: -100vw;
top: 0;
width: 225px;
height: calc(100vh - 65px);
position: sticky;
top: 65px;
transition: 0.25s;
margin-left: -250px;
box-shadow: 5px 0px 30px 0px #000;
}
.scrollable {
@ -15,27 +16,27 @@
}
.sidenav.open {
margin-left: 0px;
left: 0px;
display: block;
}
.sidenav a, button{
text-decoration: none;
color: lightgray;
margin-left: 20px;
display: block;
}
.sidenav a:hover {
color: white;
}
.sidenav nav {
box-shadow: 0px 0px 15px 0px #000;
height: 100vh;
max-width: 250px;
width: 100%;
height: calc(100vh - 65px);
background-color: #1d1f31;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 100px;
padding-bottom: 20px;
}
@media screen and (max-height: 450px) {

26
frontend/src/app/components/menu/menu.component.ts
View file

@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { MenuGroup } from '../../interfaces/services.interface';
import { StorageService } from '../../services/storage.service';
import { Router } from '@angular/router';
import { Router, NavigationStart } from '@angular/router';
import { StateService } from '../../services/state.service';
@Component({
@ -34,6 +34,15 @@ export class MenuComponent implements OnInit {
}
this.isServicesPage = this.router.url.includes('/services/');
this.navOpen = this.isServicesPage && !this.isSmallScreen();
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
if (!this.isServicesPage) {
this.navOpen = false;
}
}
});
}
isSmallScreen() {
@ -51,7 +60,9 @@ export class MenuComponent implements OnInit {
}
onLinkClick(link) {
this.navOpen = false;
if (!this.isServicesPage || this.isSmallScreen()) {
this.navOpen = false;
}
this.router.navigateByUrl(link);
}
@ -61,13 +72,12 @@ export class MenuComponent implements OnInit {
@HostListener('window:click', ['$event'])
onClick(event) {
if (event.target.id === 'empty-area') {
const cssClasses = event.target.className;
const isHamburger = cssClasses.indexOf('profile_image') !== -1;
const isMenu = cssClasses.indexOf('menu-click') !== -1;
if (!isHamburger && !this.isServicesPage && !isMenu) {
this.navOpen = false;
}
}
@HostListener('window:scroll', ['$event'])
onScroll(event) {
this.navOpen = false;
}
}

2
frontend/src/app/shared/components/global-footer/global-footer.component.html
View file

@ -73,7 +73,7 @@
<a href="https://mempool.chat" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></a>
</div>
</div>
<div class="row version" [style]="{'padding-left': addPadding ? '250px !important' : '', 'background-color': isServicesPage ? '#1d1f31' : ''}">
<div class="row version" [style]="{'background-color': isServicesPage ? '#1d1f31' : ''}">
<div class="col-sm-12">
<p *ngIf="officialMempoolSpace">{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]</p>
<p *ngIf="!officialMempoolSpace">v{{ packetJsonVersion }} [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]</p>