If navigation bar menu has only one entry, show submenu anyway (#4451)

src/docs/asciidoc/reference_doc/ui_customization.adoc

@@ -26,6 +26,9 @@ This file contains 4 fields :
 * `topRightIconMenus` : contains only the two menu icons `agenda` and `usercard` on the top right of the screen
 * `topRightMenus` : contains core menus you want to see when you click the user, on the top right of the screen
 * `locales` : contains the translations for the custom menus
+* `showDropdownMenuEvenIfOnlyOneEntry` : indicates if the name of the menu and a dropdown menu are displayed if it
+contains only one submenu entry. If false, the submenu entry will be displayed directly in the navigation bar. This field is
+optional, the default value is false.
 
 
 [[core_menu_config]]

ui/main/src/app/business/services/config.service.ts

@@ -23,6 +23,7 @@ export class ConfigService {
     private navigationBar: (CoreMenuConfig | CustomMenu)[];
     private topRightIconMenus: CoreMenuConfig[];
     private topRightMenus: CoreMenuConfig[];
+    private showDropdownMenuEvenIfOnlyOneEntry = false;
 
     private configChangeEvent =  new Subject<any>();
     private settingsOverrideEvent = new Subject<any>();
@@ -68,11 +69,19 @@ export class ConfigService {
                 this.navigationBar = serverResponse.data.navigationBar;
                 this.topRightIconMenus = serverResponse.data.topRightIconMenus;
                 this.topRightMenus = serverResponse.data.topRightMenus;
+
+                if (serverResponse.data.showDropdownMenuEvenIfOnlyOneEntry !== undefined) {
+                    this.showDropdownMenuEvenIfOnlyOneEntry = serverResponse.data.showDropdownMenuEvenIfOnlyOneEntry;
+                }
                 this.computeCustomMenuList(serverResponse.data);
                 return this.navigationBar;
             }));
     }
 
+    public getShowDropdownMenuEvenIfOnlyOneEntry(): boolean {
+        return this.showDropdownMenuEvenIfOnlyOneEntry;
+    }
+
     public getMenus(): CustomMenu[] {
         return this.customMenus;
     }

ui/main/src/app/modules/navbar/navbar.component.html

@@ -33,9 +33,10 @@
       </li>
       <!-- Links from menus declared in businessconfig-party bundles-->
       <li *ngFor="let tMenu of (businessconfigMenus); let index = index;" class="nav-item"
-        [class.dropdown]="tMenu.entries.length>1" [class.businessconfig-dropdown]="tMenu.entries.length>1">
+        [class.dropdown]="tMenu.entries.length>1 || showDropdownMenuEvenIfOnlyOneEntry"
+        [class.businessconfig-dropdown]="tMenu.entries.length>1 || showDropdownMenuEvenIfOnlyOneEntry">
         <!-- Dropdown menu if at least 2 entries-->
-        <a class="nav-link" id="opfab-navbar-menu-dropdown-{{tMenu.id}}" *ngIf="tMenu.entries.length>1"
+        <a class="nav-link" id="opfab-navbar-menu-dropdown-{{tMenu.id}}" *ngIf="tMenu.entries.length>1 || showDropdownMenuEvenIfOnlyOneEntry"
            (mouseenter)="toggleMenu(tMenu, p1)" triggers="mouseenter:mouseleave" closeDelay="3000"
            #p1="ngbPopover" [ngbPopover]="navbarDropdown" popoverClass="opfab-popover-no-arrow" placement="bottom-left" container="body"
            href="javascript:void(0)" translate>{{tMenu.label}} <em class="fa fa-caret-down"></em>
@@ -48,7 +49,7 @@
           </div>
         </ng-template>
         <!-- Navbar link if only one entry -->
-        <div class="nav-link"  style="cursor: pointer;" *ngIf="tMenu.entries.length === 1">
+        <div class="nav-link"  style="cursor: pointer;" *ngIf="tMenu.entries.length === 1 && !showDropdownMenuEvenIfOnlyOneEntry">
           <of-menu-link [currentRoute]= "currentRoute" [menu]="tMenu" [menuEntry]="tMenu.entries[0]"></of-menu-link>
         </div>
       </li>

ui/main/src/app/modules/navbar/navbar.component.ts

@@ -32,6 +32,7 @@ export class NavbarComponent implements OnInit {
     businessconfigMenus: CustomMenu[];
     openDropdownPopover: NgbPopover;
     currentDropdownHovered;
+    showDropdownMenuEvenIfOnlyOneEntry = false;
 
     modalRef: NgbModalRef;
     @ViewChild('userCard') userCardTemplate: ElementRef;
@@ -81,6 +82,8 @@ export class NavbarComponent implements OnInit {
 
         this.businessconfigMenus = this.menuService.getCurrentUserCustomMenus(this.configService.getMenus());
 
+        this.showDropdownMenuEvenIfOnlyOneEntry = this.configService.getShowDropdownMenuEvenIfOnlyOneEntry();
+
         const logo = this.configService.getConfigValue('logo.base64');
         if (logo) {
             this.customLogo = `data:image/svg+xml;base64,${logo}`;