[ui] redesign UX for navbar using sticky
This commit is contained in:
nymkappa
parent
5005817529
commit
7544357826
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user