ultima-7.0.0 menu is not displayed with static and overlay mode

[jaejong]

When menuitem is located directliy after pu:menu, menuitem is not displayed with static and overlay mode
But Horizontal and Slim are displayed.

ex)
<pu:menu widgetVar="layoutMenuWidget">
<p:menuitem id="m_quick" value="quick" icon="pi pi-fw pi-book" title="quick" outcome="/info/quickguider/guider"/>
<p:menuitem id="m_hsno" value="hsno" icon="pi pi-fw pi-book" title="hsno" outcome="/info/hs/index" />
pu:menu

[jaejong]

It maybe same case with ultima 7.0.0 can't display left menu #1243

I am using with PF 13.0.5

[melloware]

I am not seeing any issues with Ultima locally.

[jaejong]

What do mean by "with Ultima locally"?
I tryed with wildfly-29, wildfly-32.

WEB-INF/layout/template.xhtml is not changed.

WEB-INF/layout/section/menu.xhtml
--- I changed follows and other parts are remain.
<pu:menu widgetVar="layoutMenuWidget">
<p:menuitem id="m_quick" value="quick" icon="pi pi-fw pi-book" title="quick" outcome="/info/quickguider/guider"/>
<p:menuitem id="m_hsno" value="hsno" icon="pi pi-fw pi-book" title="hsno" outcome="/info/hs/index" />
</pu:menu>

resources are copied from ultima-7.0/tag/webapp/resources to webapp/ in my pom web project.

When menu mode, Horizontal and Slim are displayed in nomal browser width.
with narrow width, it does not display the menu by toggle button.

[melloware]

I can't reproduce with my Ultima. Here is Horizontal mode and then with the browser shrunk the Menu Toggle pops up.

Shrink Browser:

[jaejong]

The difference is whether you use a 'p:submenu' or not.

<pu:menu widgetVar="layoutMenuWidget">
<p:menuitem id="m_quick" value="quick" icon="pi pi-fw pi-book" title="quick" outcome="/info/quickguider/guider"/>
<p:menuitem id="m_hsno" value="hsno" icon="pi pi-fw pi-book" title="hsno" outcome="/info/hs/index" />
</pu:menu>

I put p:menuitem directlly inside pu:menu.

[melloware]

I see the issue now. Let me get you a fix...

[melloware]

OK in \webapp\resources\layout\styles\layout\layout-common\styles\menu\_menu_common.scss replace it with this and then rebuild your theme it fixes it.

.layout-menu-wrapper {
    height: calc(100% - 4rem);
    width: 17rem;
    position: fixed;
    left: 0;
    top: 4rem;
    z-index: 997;
    transform: none;

    ul {
        @include reset-list;
    }

    .layout-menu-container {
        display: flex;
        flex-direction: column;
        height: 100%;

        .layout-menu {
            padding-bottom: 2rem;
            overflow-y: auto;

            li {
                border-radius: 4px;

                &.layout-root-menuitem {
                    > a {
                        display: flex;
                    }

                    > div {
                        padding-left: 1rem;
                        margin-bottom: .5rem;
                        margin-top: 1.5rem;

                        > .layout-menuitem-text {
                            font-size: .857rem;
                            font-weight: 600;
                            text-transform: uppercase;
                        }
                    }
                }

                > a {
                    display: flex;
                    align-items: center;
                    padding: .75rem;
                    border-radius: 4px;
                    cursor: pointer;
                    user-select: none;
                    transition: background-color $transitionDuration, color $transitionDuration;

                    .layout-menuitem-text {
                        margin-left: .75rem;
                    }

                    .ui-badge {
                        margin-left: auto;
                        min-width: 1.143rem;
                        height: 1.143rem;
                        line-height: 1.143rem;
                    }

                    .layout-submenu-toggler {
                        margin-left: auto;
                    }

                    &.rotated-icon {
                        .layout-menuitem-icon {
                            transform: rotate(90deg);
                        }
                    }

                    .ui-badge + .layout-submenu-toggler {
                        margin-left: .5rem;
                    }
                }

                &.active-menuitem {
                    > a {
                        .layout-submenu-toggler {
                            transition: all $transitionDuration;
                            transform: rotate(-180deg);
                        }
                    }
                }

                > ul {
                    padding: 0 .5rem;

                    li {
                        ul {
                            padding: 0 0 .25rem;
                            overflow: hidden;
                            display: none;
                        }
                    }

                    > li {
                        margin-top: .2rem;

                        &.layout-root-menuitem {
                            > a {
                                display: flex;
                            }
                        }

                        @include nested-submenu-indents(.875rem, 2, 5);
                    }
                }
            }
        }
    }
}

[jaejong]

How to rebuild?
at ultima-7.0.0/tag dir "mvn clean install" does not rebuild.

[melloware]

Instructions are right in the Ultima docs here https://www.primefaces.org/ultima/documentation/documentation.xhtml

[jaejong]

It works well. thanks!!