refactor(menu-button): change menu button component to library

src/app/pages/portal/portal.component.html

@@ -6,18 +6,10 @@
       (click)="onBackdropClick()">
     </igo-backdrop>
 
-    <button
-      mat-icon-button
-      id= "menu-button"
-      [ngClass]="menuButtonClass"
-      color="primary"
-      tooltip-position="below"
-      matTooltipShowDelay="500"
-      [matTooltip]="(sidenavOpened ? 'menu.close' : 'menu.open') | translate"
-      (click)="onToggleSidenavClick()">
-      <mat-icon svgIcon="menu">
-      </mat-icon>
-    </button>
+    <igo-menu-button
+      [sidenavOpened]="sidenavOpened"
+      (openSidenav)="onToggleSidenavClick()">
+    </igo-menu-button>
 
     <igo-search-bar
       #searchBar

src/app/pages/portal/portal.component.scss

@@ -22,42 +22,15 @@
 
 /*** Menu button ***/
 
-.menu-button-reverse-color {
-  height: 40px;
+igo-menu-button {
   position: absolute;
-  top: 3px;
   z-index: 4;
-  border-radius: 0;
-  height: 45px;
-  width: 48px;
-}
-
-.menu-button-reverse-color-close {
-
-  position: absolute;
-  left: $igo-margin;
-  top: $igo-margin;
-  z-index: 4;
-  border-radius: 0;
 }
 
 mat-icon.disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.menu-button {
-  background-color: $app-background-color;
-  position: absolute;
-  left: $igo-margin;
-  top: $igo-margin;
-  z-index: 4;
-  border-radius: 0;
-}
-
-.menu-button ::ng-deep div.mat-button-ripple-round {
-  border-radius: 0;
-}
-
 /*** Map browser ***/
 igo-map-browser {
   width: 100%;

src/app/pages/portal/portal.component.ts

@@ -125,8 +125,6 @@ export class PortalComponent implements OnInit, OnDestroy {
   };
   public workspaceMenuClass = 'workspace-menu';
 
-  public menuButtonClass;
-
   public fullExtent = this.storageService.get('fullExtent') as boolean;
   private workspaceMaximize$$: Subscription[] = [];
   readonly workspaceMaximize$: BehaviorSubject<boolean> = new BehaviorSubject(
@@ -159,7 +157,6 @@ export class PortalComponent implements OnInit, OnDestroy {
     undefined
   );
   private routeParams: Params;
-  private menuButtonReverseColor = false;
   public toastPanelHtmlDisplay = false;
 
   @ViewChild('mapBrowser', { read: ElementRef, static: true })
@@ -329,15 +326,6 @@ export class PortalComponent implements OnInit, OnDestroy {
     if (this.igoSearchPointerSummaryEnabled === undefined) {
       this.igoSearchPointerSummaryEnabled = this.storageService.get('searchPointerSummaryEnabled') as boolean || false;
     }
-
-    if (
-      typeof this.configService.getConfig('menuButtonReverseColor') !==
-      'undefined'
-    ) {
-      this.menuButtonReverseColor = this.configService.getConfig(
-        'menuButtonReverseColor'
-      );
-    }
   }
 
   ngOnInit() {
@@ -449,7 +437,6 @@ export class PortalComponent implements OnInit, OnDestroy {
           this.openSidenav();
           this.toolState.openSidenav$.next(false);
         }
-        this.menuButtonClass = this.getClassMenuButton();
       }
     );
 
@@ -473,20 +460,6 @@ export class PortalComponent implements OnInit, OnDestroy {
     }
   }
 
-  getClassMenuButton() {
-    if (this.sidenavOpened) {
-      return {
-        'menu-button': this.menuButtonReverseColor === false,
-        'menu-button-reverse-color': this.menuButtonReverseColor === true
-      };
-    } else {
-      return {
-        'menu-button': this.menuButtonReverseColor === false,
-        'menu-button-reverse-color-close ': this.menuButtonReverseColor === true
-      };
-    }
-  }
-
   workspaceVisibility(): boolean {
     const wks = (this.selectedWorkspace$.value as WfsWorkspace | FeatureWorkspace);
     if (wks.inResolutionRange$.value) {

src/app/pages/portal/portal.theming.scss

@@ -2,18 +2,4 @@
   @include app-sidenav-theming($theme);
   @include igo-welcome-window-theming($theme);
   $primary: map-get($theme, primary);
-
-  .menu-button-reverse-color-close {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-
-  .menu-button-reverse-color {
-    background-color: matget-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-
-  .menu-button {
-    color: mat.get-color-from-palette($primary);
-  }
 }

src/config/interactiveTour.json

@@ -4,7 +4,7 @@
     "position": "auto",
     "steps": [
       {
-        "element": ".menu-button",
+        "element": "#menu-button",
         "title": "interactiveTour.global.menu-button-title",
         "text": "interactiveTour.global.menu-button",
         "onHide": {

src/style/theme.scss

@@ -1,8 +1,8 @@
 @use '~@igo2/core/style/index.theming.scss';
 @import '~@igo2/core/style/all.theming';
 @import './src/style/reset.scss';
-@import '../app//app.theming.scss';
-@import '../app//pages/portal/portal.theming.scss';
-@import '../app//pages/portal/sidenav/sidenav.theming.scss';
+@import '../app/app.theming.scss';
+@import '../app/pages/portal/portal.theming.scss';
+@import '../app/pages/portal/sidenav/sidenav.theming.scss';
 @import '../app/pages/portal/welcome-window/welcome-window.theming.scss';
 @import '../app/app.theming';