Ultima latest version menu issue

[nexgen-ui]

The latest version of the Ultima template top menu doesn't work when you click on the UI Kit and Utilities menu items. It is caused by the PrimeVue version update. Any version above 3.36 of PrimeVue breaks the links. Also please check the Float Label demo screen afterwards because it has in infinite loop in it.

[tugcekucukoglu]

Could you change the MegaMenu implementation for the latest version like this:

<MegaMenu :model="item" class="layout-megamenu">
               <template #item="{ item, hasSubmenu }">
                        <router-link v-if="item.to" v-slot="{ href, navigate }" :to="item.to" custom>
                            <a class="relative overflow-hidden flex align-items-center cursor-pointer no-underline p-2" v-ripple :href="href" @click="navigate">
                                <span :class="item.icon" class="text-black-alpha-80"/>
                                <span :class="['ml-2', { 'text-white' : hasSubmenu, 'text-black-alpha-80': !hasSubmenu}]">{{ item.label }}</span>
                            </a>
                        </router-link>
                        <a class="relative overflow-hidden flex align-items-center cursor-pointer no-underline p-2" v-else v-ripple :href="item.url" :target="item.target">
                            <span :class="item.icon" class="text-black-alpha-80"/>
                            <span :class="['ml-2', { 'text-white' : hasSubmenu, 'text-black-alpha-80': !hasSubmenu}]">{{ item.label }}</span>
                        </a>
              </template>
</MegaMenu>

Thanks for your report!

[nexgen-ui]

Thanks for providing a solution. The code you sent doesn't account for dark mode. I inspected the styles of the previous component and just used the built in PrimeVue styles. I'm still not quite sure what actually broke the menu between versions. I understand why changing it to a template based solution works though. Please can you also update the theme download with a fix when you get a chance.

<MegaMenu :model="item" class="layout-megamenu">
          <template #item="{ item }">
            <router-link v-if="item.to" v-slot="{ href, navigate }" :to="item.to" custom>
              <a class="p-menuitem-link" v-ripple :href="href" @click="navigate">
                <span :class="item.icon" class="p-menuitem-icon" />
                <span class="p-menuitem-text ml-2">{{ item.label }}</span>
              </a>
            </router-link>
            <a class="p-menuitem-link" v-else v-ripple :href="item.url" :target="item.target">
              <span :class="item.icon" class="p-menuitem-icon" />
              <span class="p-menuitem-text ml-2">{{ item.label }}</span>
            </a>
          </template>
        </MegaMenu>