mirror of
https://github.com/mempool/mempool.git
synced 2025-02-24 22:58:30 +01:00
[menu] show hamburger when logged out, fix menu scrolling on small screen
This commit is contained in:
nymkappa
parent
1bdbb1b908
commit
5aff2c74e6
8 changed files with 98 additions and 36 deletions
|
|
@ -3,6 +3,12 @@
|
|||
<ng-container *ngIf="{ val: network$ | async } as network">
|
||||
<header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
||||
<!-- Hamburger -->
|
||||
<div class="profile_image_container" (click)="hamburgerClick()">
|
||||
<img *ngIf="userAuth" [src]="'/api/v1/services/account/image/' + userAuth.user.username" class="profile_image">
|
||||
<app-svg-images *ngIf="!userAuth" name="hamburger" height=40></app-svg-images>
|
||||
</div>
|
||||
|
||||
<a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
|
||||
<ng-template [ngIf]="subdomain">
|
||||
<div class="subdomain_container">
|
||||
|
|
@ -64,6 +70,8 @@
|
|||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="content-padding"></div>
|
||||
|
||||
<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
|
||||
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@ li.nav-item {
|
|||
|
||||
.navbar-brand {
|
||||
position: relative;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.navbar-brand.dual-logos {
|
||||
|
|
@ -209,4 +208,23 @@ nav {
|
|||
margin-left: 5px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile_image_container {
|
||||
width: 35px;
|
||||
margin-right: 15px;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.profile_image {
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.content-padding {
|
||||
padding-top: 65px;
|
||||
@media (max-width: 572px) {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Component, OnInit, Input, ViewChild } from '@angular/core';
|
||||
import { Env, StateService } from '../../services/state.service';
|
||||
import { Observable, merge, of } from 'rxjs';
|
||||
import { LanguageService } from '../../services/language.service';
|
||||
import { EnterpriseService } from '../../services/enterprise.service';
|
||||
import { NavigationService } from '../../services/navigation.service';
|
||||
import { MenuComponent } from '../menu/menu.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-master-page',
|
||||
|
|
@ -25,6 +26,10 @@ export class MasterPageComponent implements OnInit {
|
|||
networkPaths: { [network: string]: string };
|
||||
networkPaths$: Observable<Record<string, string>>;
|
||||
footerVisible = true;
|
||||
userAuth: any | undefined;
|
||||
|
||||
@ViewChild(MenuComponent)
|
||||
private menuComponent!: MenuComponent;
|
||||
|
||||
constructor(
|
||||
public stateService: StateService,
|
||||
|
|
@ -51,6 +56,8 @@ export class MasterPageComponent implements OnInit {
|
|||
this.footerVisible = this.footerVisibleOverride;
|
||||
}
|
||||
});
|
||||
|
||||
this.userAuth = JSON.parse(localStorage.getItem('auth') || '') ?? null;
|
||||
}
|
||||
|
||||
collapse(): void {
|
||||
|
|
@ -64,4 +71,10 @@ export class MasterPageComponent implements OnInit {
|
|||
brandClick(e): void {
|
||||
this.stateService.resetScroll$.next(true);
|
||||
}
|
||||
|
||||
hamburgerClick(): void {
|
||||
if (this.menuComponent) {
|
||||
this.menuComponent.hambugerClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
<div class="sidenav" [class]="navOpen ? 'open': 'close'" *ngIf="userMenuGroups$ | async as menuGroups">
|
||||
<div class="pt-3 pl-4 pr-4">
|
||||
<nav>
|
||||
<div *ngFor="let group of menuGroups" >
|
||||
<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)="navOpen = false;">
|
||||
<fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
|
||||
<a *ngIf="item.link === 'logout'" class="nav-link" role="tab" (click)="logout()">{{ item.title }}</a>
|
||||
<a *ngIf="item.title !== 'Logout'" class="nav-link" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<nav class="pt-3 pl-4 pr-4">
|
||||
<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)="navOpen = false;">
|
||||
<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>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -1,34 +1,31 @@
|
|||
.sidenav {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 65px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: #1d1f31;
|
||||
overflow-x: hidden;
|
||||
box-shadow: 0px 0px 15px 0px #000;
|
||||
width: 0px;
|
||||
height: calc(100vh - 65px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 65px;
|
||||
@media (max-width: 991px) {
|
||||
top: 80px;
|
||||
};
|
||||
height: calc(100vh - 65px - 55px);
|
||||
}
|
||||
@media (max-width: 572px) {
|
||||
top: 120px;
|
||||
top: 100px;
|
||||
height: calc(100vh - 105px);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav.open {
|
||||
width: 235px;
|
||||
@media (max-width: 400px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sidenav.close {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
.sidenav a, button{
|
||||
text-decoration: none;
|
||||
font-size: 20x;
|
||||
color: lightgray;
|
||||
|
|
@ -38,6 +35,13 @@
|
|||
.sidenav a:hover {
|
||||
color: white;
|
||||
}
|
||||
.sidenav nav {
|
||||
height: auto;
|
||||
padding-bottom: 50px;
|
||||
@media (max-width: 572px) {
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { MenuGroup } from '../../interfaces/services.interface';
|
||||
|
|
@ -10,7 +10,7 @@ import { MenuGroup } from '../../interfaces/services.interface';
|
|||
})
|
||||
|
||||
export class MenuComponent implements OnInit {
|
||||
navOpen: boolean = true;
|
||||
navOpen: boolean = false;
|
||||
userMenuGroups$: Observable<MenuGroup[]> | undefined;
|
||||
|
||||
constructor(
|
||||
|
|
@ -22,6 +22,10 @@ export class MenuComponent implements OnInit {
|
|||
}
|
||||
|
||||
logout(): void {
|
||||
console.log('logout');
|
||||
this.apiService.logout$().subscribe();
|
||||
}
|
||||
|
||||
hambugerClick() {
|
||||
this.navOpen = !this.navOpen;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,6 +74,11 @@
|
|||
<path fill="#FFFFFF" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
|
||||
</svg>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="'hamburger'">
|
||||
<svg [attr.width]="width" [attr.height]="height" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
|
||||
<path stroke-width="0.5" stroke-linecap="round" d="M0.5 2.5 H7 M0.5 5 H5.5 M0.5 7.5 H7"></path>
|
||||
</svg>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #bitcoinLogo let-color let-width="width" let-height="height" let-viewBox="viewBox">
|
||||
|
|
|
|||
|
|
@ -353,4 +353,16 @@ export class ApiService {
|
|||
headers: { 'Authorization': auth.token }
|
||||
});
|
||||
}
|
||||
|
||||
logout$() {
|
||||
const auth = JSON.parse(localStorage.getItem('auth') || '');
|
||||
if (!auth) {
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem('auth', null);
|
||||
return this.httpClient.post(`${SERVICES_API_PREFIX}/auth/logout`, {
|
||||
headers: { 'Authorization': auth.token }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue