Menu closes after click on UltimaNG 9.0.0

[centai]

I updated to UltimaNG 9.0.0, following the instructions in the documentation.

Now I have the issue that after I click somewhere on the menu, the submenu closes directly after the click instead of staying open.
Is there anything I missed at the update?

[centai]

I figured out meanwhile that I have to add routerLink to group nodes, which contain children as well. The problem is that I have sub paths for some items, which do not exist in the menu.

For example:

Menu
- Components (/components)
- Component A (/components/a)
- Component B (/components/b)

In a component view e.g. when component a is open there are some views like

- /component/a/edit
- /component/a/status

(these are not in the main menu)

When the path changes to these, the active state disappears and the menu group closes. Is it possible to change it to stay active if it matches the first part of the route?

[merve7]

Hi,
For your first question, please, can you sure you updated app.main.component.ts especially onLayoutClick function?
And for the second, We followed the below steps and it works. Can you try these steps, if they don't work please send out your codes?
in app.routes

Code: Select all

    { path: '', component: AppMainComponent,
        children: [
            { path: '', component: DashboardDemoComponent },
            { path: 'components/sample', component: SampleDemoComponent },
            { path: 'components/a', component: ADemoComponent },
            { path: 'components/a/edit', component: EditDemoComponent },

in app.menu

Code: Select all

        this.model = [
            {label: 'Dashboard', icon: 'dashboard', routerLink: ['/']},
            {
                label: 'Components', icon: 'list', badge: '2', badgeStyleClass: 'teal-badge', routerLink: ['/components'],
                items: [
                    {label: 'Sample Page', icon: 'desktop_mac', routerLink: ['/components/sample']},
                    {label: 'A', icon: 'input', routerLink: ['/components/a']},
                    //other codes

lastly, in app.menuitem line 125 //important

Code: Select all

        this.active = this.router.isActive(this.item.routerLink[0], this.item.items || this.item.routerLink[0] === '/components/a' ? false : true);

[centai]

Hi merve7,

I don't have all routes in the in app.menu. For example in app.routes I have

Code: Select all

{ path: 'components/a/edit', component: EditDemoComponent },

But /edit is not reflected in the app.menu, since there is only an edit button in the 'component/a' page.


I updated UltimaNG according to the documentation. In app.menuitem.component.ts line 124-126 look like this:

Code: Select all

    
    updateActiveStateFromRoute() {
        this.active = this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
    }
    

The onLayoutClick function looks like this:

Code: Select all

    onLayoutClick() {
        if (!this.topbarItemClick) {
            this.activeTopbarItem = null;
            this.topbarMenuActive = false;
        }

        if (!this.menuClick) {
            if (this.isHorizontal() || this.isSlim()) {
                this.menuService.reset();
            }

            if (this.overlayMenuActive || this.staticMenuMobileActive) {
                this.hideOverlayMenu();
            }

            this.menuHoverActive = false;
        }

        if (!this.rightPanelClick) {
            this.rightPanelActive = false;
        }

        if (this.configActive && !this.configClick) {
            this.configActive = false;
        }

        this.configClick = false;
        this.topbarItemClick = false;
        this.menuClick = false;
        this.rightPanelClick = false;
    }