mirror of
https://github.com/mempool/mempool.git
synced 2025-02-24 22:58:30 +01:00
[ui] redesign UX for navbar
This commit is contained in:
nymkappa
parent
7674bee5ad
commit
30be7e0f7a
6 changed files with 65 additions and 69 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<footer>
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row main" [style]="addPadding ? 'padding-left: 235px !important' : ''">
|
||||
<div class="row main">
|
||||
<div class="col-md-12 branding mt-2">
|
||||
<div class="main-logo">
|
||||
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-md-12 link-tree" [style]="addPadding ? 'padding-left: 250px !important' : ''">
|
||||
<div class="row col-md-12 link-tree">
|
||||
<div class="links">
|
||||
<p class="category">Explore</p>
|
||||
<p><a [routerLink]="['/mining' | relativeUrl]">Mining Dashboard</a></p>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<p><a [routerLink]="['/trademark-policy']">Trademark Policy</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row social-links" [style]="addPadding ? 'padding-left: 250px !important' : ''">
|
||||
<div class="row social-links">
|
||||
<div class="col-sm-12">
|
||||
<a href="https://github.com/mempool" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
|
||||
<a href="https://twitter.com/mempool" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue