[menu] write menu component with hardcoded values

frontend/src/app/components/master-page/master-page.component.html

@@ -1,5 +1,7 @@
+<app-menu></app-menu>
+
 <ng-container *ngIf="{ val: network$ | async } as network">
-<header *ngIf="headerVisible">
+<header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
   <ng-template [ngIf]="subdomain">

frontend/src/app/components/menu/menu.component.html

@@ -0,0 +1,17 @@
+<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 class="nav-link" routerLinkActive="active" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</div>

frontend/src/app/components/menu/menu.component.scss

@@ -0,0 +1,46 @@
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 65px;
+  left: 0;
+  background-color: #1d1f31;
+  overflow-x: hidden;
+  box-shadow: 0px 0px 15px 0px #000;
+  overflow-y: scroll;
+  height: 100vh;
+  @media (max-width: 991px) {
+    top: 80px;
+  };
+  @media (max-width: 572px) {
+    top: 120px;
+  }
+}
+
+.sidenav.open {
+  width: 235px;
+  @media (max-width: 400px) {
+    width: 100%;
+  }
+}
+.sidenav.close {
+  width: 0px;
+}
+
+.sidenav a {
+  text-decoration: none;
+  font-size: 20x;
+  color: lightgray;
+  margin-left: 20px;
+  display: block;
+}
+.sidenav a:hover {
+  color: white;
+}
+
+/* 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;}
+}

frontend/src/app/components/menu/menu.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApiService } from '../../services/api.service';
+import { MenuGroup } from '../../interfaces/services.interface';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss']
+})
+
+export class MenuComponent implements OnInit {
+  navOpen: boolean = true;
+  userMenuGroups$: Observable<MenuGroup[]> | undefined;
+
+  constructor(
+    private apiService: ApiService
+  ) {}
+
+  ngOnInit(): void {
+    this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
+  }
+}

frontend/src/app/interfaces/services.interface.ts

@@ -0,0 +1,13 @@
+import { IconName } from '@fortawesome/fontawesome-common-types';
+
+export type MenuItem = {
+  title: string;
+  i18n: string;
+  faIcon: IconName;
+  link: string;
+};
+export type MenuGroup = {
+  title: string;
+  i18n: string;
+  items: MenuItem[];  
+}

frontend/src/app/services/api.service.ts

@@ -7,6 +7,7 @@ import { StateService } from './state.service';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
 import { Outspend, Transaction } from '../interfaces/electrs.interface';
 import { Conversion } from './price.service';
+import { MenuGroup } from '../interfaces/services.interface';
 
 const SERVICES_API_PREFIX = `/api/v1/services`;
 
@@ -334,9 +335,56 @@ export class ApiService {
   /**
    * Services
    */
-  getNodeOwner$(publicKey: string) {
+  
+  getNodeOwner$(publicKey: string): Observable<any> {
     let params = new HttpParams()
       .set('node_public_key', publicKey);
     return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/lightning/claim/current`, { params, observe: 'response' });
   }
+
+  getUserMenuGroups$(): Observable<MenuGroup[]> {
+    const auth = JSON.parse(localStorage.getItem('auth') || '');
+    if (!auth) {
+      return of(null);
+    }
+
+    return of([
+      {
+        title: 'Lightning',
+        i18n: '',
+        items: [
+          {
+            title: 'Nodes',
+            i18n: '',
+            faIcon: 'network-wired',
+            link: '/services/lightning/nodes'
+          }
+        ]
+      },
+      {
+        title: 'Enterprise',
+        i18n: '',
+        items: [
+          {
+            title: 'Settings',
+            i18n: '',
+            faIcon: 'id-card-alt',
+            link: '/services/enterprise/settings'
+          },
+          {
+            title: 'IP Whitelist',
+            i18n: '',
+            faIcon: 'check-circle',
+            link: '/services/enterprise/ip-whitelist'
+          }
+        ]
+      }
+    ]);
+
+    // return this.httpClient.get<MenuGroup[]>(`${SERVICES_API_PREFIX}/account`, {
+    //   headers: {
+    //     'Authorization': auth.token
+    //   }
+    // });
+  }
 }

frontend/src/app/shared/shared.module.ts

@@ -4,9 +4,10 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MasterPageComponent } from '../components/master-page/master-page.component';
+import { MenuComponent } from '../components/menu/menu.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
 import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
 import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
@@ -135,6 +136,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AmountComponent,
     AboutComponent,
     MasterPageComponent,
+    MenuComponent,
     PreviewTitleComponent,
     BisqMasterPageComponent,
     LiquidMasterPageComponent,
@@ -220,6 +222,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
   ],
   exports: [
     MasterPageComponent,
+    MenuComponent,
     RouterModule,
     ReactiveFormsModule,
     NgbNavModule,
@@ -359,5 +362,20 @@ export class SharedModule {
     library.addIcons(faQrcode);
     library.addIcons(faArrowRightArrowLeft);
     library.addIcons(faExchangeAlt);
+    library.addIcons(faList);
+    library.addIcons(faFastForward);
+    library.addIcons(faWallet);
+    library.addIcons(faUserClock);
+    library.addIcons(faWrench);
+    library.addIcons(faUserFriends);
+    library.addIcons(faQuestionCircle);
+    library.addIcons(faHistory);
+    library.addIcons(faSignOutAlt);
+    library.addIcons(faKey);
+    library.addIcons(faSuitcase);
+    library.addIcons(faIdCardAlt);
+    library.addIcons(faNetworkWired);
+    library.addIcons(faUserCheck);
+    library.addIcons(faCircleCheck);
   }
 }