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

[menu] show hamburger when logged out, fix menu scrolling on small screen

Browse Source
This commit is contained in:
nymkappa
2023-08-18 17:56:07 +02:00
parent 1bdbb1b908
commit 5aff2c74e6
8 changed files with 98 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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) {

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

@@ -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;
}
}