[debug] show services backend version in /services global footer, show services global frontend build in /about

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

@@ -4,7 +4,8 @@
     <span style="margin-left: auto; margin-right: -20px; margin-bottom: -20px">&reg;</span>
     <img class="logo" src="/resources/mempool-logo-bigger.png" />
     <div class="version">
-      v{{ packetJsonVersion }} [<a href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]
+      <span *ngIf="!stateService.env.SERVICES">v{{ packetJsonVersion }} [<a href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]</span>
+      <span *ngIf="stateService.env.SERVICES">v{{ packetJsonVersion }} [<a href="https://github.com/mempool/mempool.space/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]</span>
     </div>
   </div>
 

frontend/src/app/components/fiat-selector/fiat-selector.component.html

@@ -1,5 +1,5 @@
 <div [formGroup]="fiatForm" class="text-small text-center">
-    <select formControlName="fiat" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 150px;" (change)="changeFiat()">
-        <option *ngFor="let currency of currencies" [value]="currency[1].code">{{ currency[1].name + " (" + currency[1].code + ")" }}</option>
+    <select formControlName="fiat" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 95px;" (change)="changeFiat()">
+        <option *ngFor="let currency of currencies" [value]="currency[1].code">{{ currency[1].code }}</option>
     </select>
 </div>

frontend/src/app/components/language-selector/language-selector.component.html

@@ -1,5 +1,5 @@
 <div [formGroup]="languageForm" class="text-small text-center">
-    <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 100px;" (change)="changeLanguage()">
+    <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 95px;" (change)="changeLanguage()">
         <option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
     </select>
 </div>

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

@@ -12,7 +12,7 @@
           <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;">
+          <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>

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

@@ -19,7 +19,7 @@
 }
 
 .sidenav.open {
-  width: 235px;
+  width: 225px;
 }
 .sidenav.close {
   width: 0px;

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

@@ -3,6 +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';
 
 @Component({
   selector: 'app-menu',
@@ -11,19 +12,29 @@ import { StorageService } from '../../services/storage.service';
 })
 
 export class MenuComponent implements OnInit {
+  @Output() loggedOut = new EventEmitter<boolean>();
+
   navOpen: boolean = false;
   userMenuGroups$: Observable<MenuGroup[]> | undefined;
   userAuth: any | undefined;
-  @Output() loggedOut = new EventEmitter<boolean>();
+  isServices = false;
 
   constructor(
     private apiService: ApiService,
-    private storageService: StorageService
+    private storageService: StorageService,
+    private router: Router
   ) {}
 
   ngOnInit(): void {
     this.userAuth = this.storageService.getAuth();
     this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
+
+    this.isServices = this.router.url.includes('/services/');
+    this.navOpen = this.isServices && !this.isSmallScreen();
+  }
+
+  isSmallScreen() {
+    return window.innerWidth <= 767.98;
   }
 
   logout(): void {
@@ -31,6 +42,12 @@ export class MenuComponent implements OnInit {
     this.loggedOut.emit(true);
   }
 
+  onLinkClick() {
+    if (!this.isServices || this.isSmallScreen()) {
+      this.navOpen = false;
+    }
+  }
+
   hambugerClick() {
     this.navOpen = !this.navOpen;
   }

frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html

@@ -1,5 +1,5 @@
 <div [formGroup]="rateUnitForm" class="text-small text-center">
-    <select formControlName="rateUnits" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 100px;" (change)="changeUnits()">
+    <select formControlName="rateUnits" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 95px;" (change)="changeUnits()">
         <option *ngFor="let unit of units" [value]="unit.name">{{ unit.label }}</option>
     </select>
 </div>