Move inspect logs button to header menu item (#79)

src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.html

@@ -1 +1,13 @@
-<img src="assets/ic-logo.svg" (click)="goHome()" alt="wallet-logo"/>
+
+  <img src="assets/ic-logo.svg" (click)="goHome()" alt="wallet-logo"/>
+
+
+  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="menu">
+    <mat-icon>menu</mat-icon>
+  </button>
+
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item>
+      <a id="inspectLogs" (click)="inspectLogs()">Inspect transaction logs</a>
+    </button>
+  </mat-menu>

src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.scss

@@ -17,6 +17,14 @@
         padding: temp.$spaceBasic;
         position: relative;
     }
+
+    button {
+        cursor: pointer;
+        left: 45%;
+        position: relative;
+        overflow-clip-margin: content-box;
+    }
+
     @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
         img {
             left: 3%;

src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.ts

@@ -1,16 +1,40 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
 import { NavigateService } from '@app/core/services/navigate.service';
+import {MatButtonModule} from "@angular/material/button";
+import {MatIconModule} from "@angular/material/icon";
+import {MatMenuModule} from "@angular/material/menu";
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {OpenLogsComponent} from "@shared/elements/open-logs/open-logs.component";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
-	selector: 'vc-wallet-layout-header',
-	standalone: true,
-	templateUrl: './wallet-layout-header.component.html',
-	styleUrls: ['./wallet-layout-header.component.scss']
+    selector: 'vc-wallet-layout-header',
+    standalone: true,
+    templateUrl: './wallet-layout-header.component.html',
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatToolbarModule
+    ],
+    styleUrls: ['./wallet-layout-header.component.scss']
 })
 export class WalletLayoutHeaderComponent {
 	constructor (private readonly navigateService: NavigateService) {}
 
+  private dialog: MatDialog = inject(MatDialog);
+
 	goHome () {
 		this.navigateService.goHome();
 	}
+
+  inspectLogs () {
+    this.dialog.open(OpenLogsComponent, {
+      data: {
+        transactionId: '',
+        label: 'Inspect transaction logs',
+        isInspectLogs: true
+      },
+    });
+  }
 }

src/app/features/home/components/home/home.component.html

@@ -1,10 +1,5 @@
 <vc-wallet-layout>
   <div body class="container ">
-    <mat-card appearance="outlined" class="show-logs">
-      <mat-card-content> <div class="log-button">
-        <vc-button class="vc-button" name="Inspect transaction logs" id="inspectLogs" mode="none" color="primary" (clicked)="inspectLogs()"></vc-button>
-      </div> </mat-card-content>
-    </mat-card>
     <mat-tab-group animationDuration="0ms" (selectedIndexChange)="selectedIndexChange($event)">
       <mat-tab #pid label="PID authentication">
         <ng-container *ngIf="pid.isActive">

src/app/features/home/components/home/home.component.ts

@@ -17,7 +17,6 @@ import {MatTabsModule} from '@angular/material/tabs';
 import {AttestationSelectableModelService} from '@app/core/services/attestation-selectable-model.service';
 import { OpenLogsComponent } from '@app/shared/elements/open-logs/open-logs.component';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { MatCardModule } from '@angular/material/card';
 @Component({
 	standalone: true,
 	imports: [
@@ -28,8 +27,7 @@ import { MatCardModule } from '@angular/material/card';
 		InputSchemeComponent,
 		WalletLayoutComponent,
 		OpenLogsComponent,
-		MatDialogModule,
-		MatCardModule
+		MatDialogModule
 	],
 	templateUrl: './home.component.html',
 	styleUrls: ['./home.component.scss'],
@@ -139,14 +137,4 @@ export class HomeComponent implements OnInit {
 			return item;
 		});
 	}
-	inspectLogs () {
-  	this.dialog.open(OpenLogsComponent, {
-  		data: {
-  			transactionId: '',
-  			label: 'Inspect transaction logs',
-				isInspectLogs: true
-  		},
-  	});
-	}
-
 }

src/app/shared/elements/open-logs/open-logs.component.html

@@ -3,7 +3,7 @@ <h2 mat-dialog-title>{{label}}</h2>
     <mat-dialog-content class="mat-typography">
       <div class="dialog-container">
         <div *ngIf="isInspectLogs" class="inspect-logs">
-            <form >
+            <form class="example-form">
               <mat-form-field class="example-full-width">
                 <mat-label>Transaction ID</mat-label>
                 <input type="scheme" matInput [formControl]="schemeControl" [errorStateMatcher]="matcher" placeholder="type a transaction ID">