feat: Enable menu and account on one line, and icon-only menu items (#2826)

AB#121668

---------

Co-authored-by: Antoine Hurard <antoine@reliefapplications.org>

Author: Joselgc1

apps/back-office/src/app/app-preview/app-preview.component.html

@@ -2,6 +2,7 @@
   [title]="title"
   [leftSidenav]="showNavigation ? leftSidenav : undefined"
   [sideMenu]="sideMenu"
+  [topMenu]="topMenu"
   [menuOpened]="!hideMenu"
 ></shared-layout>
 <ng-template #toolbar>
@@ -13,6 +14,7 @@
     [nav]="nav"
     [navGroups]="navGroups"
     [appLayout]="true"
-    [vertical]="!(!sideMenu && largeDevice)"
+    [vertical]="topMenu ? false : !(!sideMenu && largeDevice)"
+    [topMenu]="topMenu"
   ></shared-navbar>
 </ng-template>

apps/back-office/src/app/app-preview/app-preview.component.ts

@@ -99,6 +99,10 @@ export class AppPreviewComponent
    * Use side menu or not.
    */
   public sideMenu = false;
+  /**
+   * Use header menu or not.
+   */
+  public topMenu = false;
   /** Should hide menu by default ( only when vertical ) */
   public hideMenu = false;
   /** Should show navigation. False if only one or less page visible */
@@ -158,6 +162,8 @@ export class AppPreviewComponent
           icon: x.icon || this.getNavIcon(x.type || ''),
           fontFamily: x.icon ? 'fa' : 'material',
           visible: x.visible ?? false,
+          showName: x.navBar?.showName !== false,
+          showIcon: x.navBar?.showIcon !== false,
         })) || []
     );
   }
@@ -282,7 +288,12 @@ export class AppPreviewComponent
           }
           this.application = application;
           this.sideMenu = this.application?.sideMenu ?? true;
+          this.topMenu = this.application?.topMenu ?? false;
           this.hideMenu = this.application?.hideMenu ?? false;
+          if (this.topMenu) {
+            this.sideMenu = false;
+            this.hideMenu = false;
+          }
         } else {
           this.navGroups = [];
         }

apps/back-office/src/app/app-preview/pages/dashboard/graphql/queries.ts

@@ -28,6 +28,10 @@ export const GET_DASHBOARD_BY_ID = gql`
       page {
         id
         showName
+        navBar {
+          showName
+          showIcon
+        }
         application {
           shortcut
           id
@@ -38,6 +42,10 @@ export const GET_DASHBOARD_BY_ID = gql`
         id
         icon
         showName
+        navBar {
+          showName
+          showIcon
+        }
         workflow {
           id
           page {

apps/back-office/src/app/app-preview/pages/workflow/graphql/queries.ts

@@ -28,6 +28,10 @@ export const GET_WORKFLOW_BY_ID = gql`
         id
         icon
         showName
+        navBar {
+          showName
+          showIcon
+        }
         name
         type
         content
@@ -36,6 +40,11 @@ export const GET_WORKFLOW_BY_ID = gql`
       page {
         id
         name
+        showName
+        navBar {
+          showName
+          showIcon
+        }
         canUpdate
         permissions {
           canSee {

apps/back-office/src/app/application/application.component.html

@@ -10,6 +10,7 @@
   [header]="header"
   [leftSidenav]="pages"
   [sideMenu]="sideMenu"
+  [topMenu]="topMenu"
   [menuOpened]="!hideMenu"
 ></shared-layout>
 <ng-template #header>
@@ -27,7 +28,8 @@
     [navGroups]="navGroups"
     [appLayout]="true"
     [canAddPage]="application?.canUpdate!"
-    [vertical]="!(!sideMenu && largeDevice)"
+    [topMenu]="topMenu"
+    [vertical]="topMenu ? false : !(!sideMenu && largeDevice)"
     (reorder)="onReorder($event)"
   ></shared-navbar>
 </ng-template>

apps/back-office/src/app/application/application.component.ts

@@ -43,6 +43,8 @@ export class ApplicationComponent
   public application?: Application;
   /** Use side menu or not */
   public sideMenu = false;
+  /** Use header menu or not */
+  public topMenu = false;
   /** Should hide menu by default ( only when vertical ) */
   public hideMenu = false;
   /** Is large device */
@@ -112,6 +114,8 @@ export class ApplicationComponent
               : `./${x.type}/${x.content}`,
           icon: x.icon || this.getNavIcon(x.type || ''),
           fontFamily: x.icon ? 'fa' : 'material',
+          showName: x.navBar?.showName !== false,
+          showIcon: x.navBar?.showIcon !== false,
           class: null,
           orderable: true,
           visible: x.visible ?? true,
@@ -216,7 +220,12 @@ export class ApplicationComponent
           }
           this.application = application;
           this.sideMenu = this.application?.sideMenu ?? true;
+          this.topMenu = this.application?.topMenu ?? false;
           this.hideMenu = this.application?.hideMenu ?? false;
+          if (this.topMenu) {
+            this.sideMenu = false;
+            this.hideMenu = false;
+          }
         } else {
           this.title = '';
           this.navGroups = [];

apps/back-office/src/app/application/pages/form/form.component.ts

@@ -337,6 +337,7 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
         icon: this.isStep ? this.step?.icon : this.page?.icon,
         visible: this.page?.visible,
         showName: this.isStep ? this.step?.showName : this.page?.showName,
+        navBar: this.isStep ? this.step?.navBar : this.page?.navBar,
         accessData: {
           access: this.page
             ? this.page.permissions

apps/back-office/src/app/application/pages/form/graphql/queries.ts

@@ -9,6 +9,10 @@ export const GET_STEP_BY_ID = gql`
       id
       icon
       showName
+      navBar {
+        showName
+        showIcon
+      }
       name
       createdAt
       modifiedAt
@@ -55,6 +59,10 @@ export const GET_PAGE_BY_ID = gql`
       id
       icon
       showName
+      navBar {
+        showName
+        showIcon
+      }
       name
       visible
       createdAt

apps/back-office/src/app/application/pages/settings/settings.component.html

@@ -88,6 +88,16 @@ <h1 class="!m-0">{{ 'common.general' | translate }}</h1>
       >
       </ui-textarea>
     </div>
+    <!-- Top menu -->
+    <div class="mb-6">
+      <ui-toggle formControlName="topMenu">
+        <ng-container ngProjectAs="label">
+          {{
+            'components.application.update.topMenu' | translate
+          }}</ng-container
+        >
+      </ui-toggle>
+    </div>
     <!-- Side menu -->
     <div class="mb-6">
       <ui-toggle formControlName="sideMenu">

apps/back-office/src/app/application/pages/settings/settings.component.ts

@@ -124,15 +124,33 @@ export class SettingsComponent extends UnsubscribeComponent implements OnInit {
    * @returns form group
    */
   private createSettingsForm(application: Application) {
-    return this.fb.group({
+    const form = this.fb.group({
       id: [{ value: application.id, disabled: true }],
       name: [application.name, Validators.required],
       shortcut: [application.shortcut, shortcutValidator],
       sideMenu: [application.sideMenu],
+      topMenu: [application.topMenu],
       hideMenu: [application.hideMenu],
       description: [application.description],
       status: [application.status],
     });
+    // Make sure top menu and side menu are mutually exclusive
+    form.controls.sideMenu.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((value) => {
+        if (value) {
+          form.controls.topMenu.setValue(false, { emitEvent: false });
+        }
+      });
+    form.controls.topMenu.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((value) => {
+        if (value) {
+          form.controls.sideMenu.setValue(false, { emitEvent: false });
+          form.controls.hideMenu.setValue(false, { emitEvent: false });
+        }
+      });
+    return form;
   }
 
   /**