Navbar closing item after click

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
vertical-dev
Posts: 3
Joined: 25 Nov 2022, 10:23

30 Nov 2022, 12:29

Hi,
I've recently purchased the license for PrimeNG PrimeBlocks and I'm facing an issue with the behavior of the nav-bar component. If i use a nested menu component, like CUSTOMERS in your example, and I click on the first element, where i'm placing a router link to a page, the element still present on the page and do not close. I have to click outside the element to make it disappear (thanks to the property [hideOnOutsideClick]="true").
Is there a way/property to automatically close the menu item after the user click on it?

Thanks in advance.

Fabio

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

06 Jan 2023, 09:42

Hi,

Could you please share a screenshot or screencast so we can identify the problem?

vertical-dev
Posts: 3
Joined: 25 Nov 2022, 10:23

21 Jun 2023, 16:45

Hi,
I apologize for all the time that has passed, but what worked for one project doesn't work for a new project I'm working on. The issue remains the same, which is that clicking on any element within the panel doesn't close the panel itself, and it remains in the foreground.
I have seen several other posts regarding this, but none of them provided a solution.
The issue occurs with both primeng 14.2.1 and 15.4.1. I have imported the StyleClassModule as suggested, but without success.

This is part of the code that i took from primeblocks:

Code: Select all

<div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between relative lg:static"
    style="min-height: 80px">
    <img src="assets/loghi/Logo coop amico 1.png" alt="Image" height="40" class="mr-0 lg:mr-6 align-self-center">
    <a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden"
        leaveToClass="hidden" [hideOnOutsideClick]="true">
        <i class="pi pi-bars text-4xl"></i>
    </a>
    <div
        class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
        <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row"  (hidden)="showMenu">
            <li *ngIf="auth.user$ | async as user">
                <a pRipple 
                    class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150"
                    (click)="goToHome()">
                    <i class="pi pi-home mr-2"></i>
                    <span>Home</span>
                </a>
            </li>
            <li *ngIf="isAdministrator() && auth.user$ | async as user" class="lg:relative">
                <a pRipple
                    class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150"
                    pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden"
                    leaveActiveClass="fadeout" [hideOnOutsideClick]="true" >
                    <i class="pi pi-users mr-2"></i>
                    <span>Anagrafiche</span>
                    <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
                </a>
                <ul
                    class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
                    <li>
                        <a pRipple
                            class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150"
                            (click)="openAnagraficaCentriDiCosto()">
                            <i class="pi pi-map-marker mr-2"></i>
                            <span class="font-medium">Centri di costo</span>
                        </a>
                    </li>
                    <li>
                        <a pRipple
                            class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150"
                            (click)="openAnagraficaClienti()">
                            <i class="pi pi-briefcase mr-2"></i>
                            <span class="font-medium">Clienti</span>
                        </a>
                    </li>
                    <li>
                        <a pRipple
                            class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150"
                            (click)="openAnagraficaCommesse()">
                            <i class="pi pi-euro mr-2"></i>
                            <span class="font-medium">Commesse</span>
                        </a>
                    </li>
                    <li>
                        <a pRipple
                            class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150"
                            (click)="openAnagraficaComuni()">
                            <i class="pi pi-compass mr-2"></i>
                            <span class="font-medium">Comuni</span>
                        </a>
                    </li>
                    <li>
                        <a pRipple
                            class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150"
                            (click)="openAnagraficaDipendenti()">
                            <i class="pi pi-users mr-2"></i>
                            <span class="font-medium">Dipendenti</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li *ngIf="auth.user$ | async as user">
                <a pRipple
                    class="flex px-6 p-3 h-full lg:px-3 lg:py-2 align-items-center text-600 border-left-2 lg:border-bottom-2 lg:border-left-none border-transparent hover:border-blue-500 font-medium cursor-pointer transition-colors transition-duration-150"
                    (click)="openMieAttivita()">
                    <i class="pi pi-calendar mr-2"></i>
                    <span>Le mie attività</span>
                </a>
            </li>
            <li *ngIf="isAdministrator() && auth.user$ | async as user">
                <a pRipple
                    class="flex px-6 p-3 h-full lg:px-3 lg:py-2 align-items-center text-600 border-left-2 lg:border-bottom-2 lg:border-left-none border-transparent hover:border-blue-500 font-medium cursor-pointer transition-colors transition-duration-150"
                    (click)="openRegistroAttivita()">
                    <i class="pi pi-book mr-2"></i>
                    <span>Registro Attività</span>
                </a>
            </li>
            <li *ngIf="isAdministrator() && auth.user$ | async as user">
                <a pRipple
                    class="flex px-6 p-3 h-full lg:px-3 lg:py-2 align-items-center text-600 text-blue-500 border-left-2 lg:border-bottom-2 lg:border-left-none border-transparent hover:border-blue-500 font-medium cursor-pointer transition-colors transition-duration-150"
                    (click)="openOldVersionLink()">
                    <i class="pi pi-directions mr-2"></i>
                    <span>Apri Versione Precedente</span>
                </a>
            </li>
            
        </ul>
        <ul
            class="list-none p-0 m-0 flex select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
            <li *ngIf="auth.user$ | async as user">
                <a pRipple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150">
                    <i class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0" pBadge severity="danger"></i>
                    <span class="block lg:hidden font-medium">Notifiche</span>
                </a>
            </li>
            <li class="border-top-1 border-gray-800 lg:border-top-none text-gray-400"
            *ngIf="(auth.isAuthenticated$ | async) === false">
            <a pRipple
            class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150"
            pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden"
            leaveActiveClass="fadeout" [hideOnOutsideClick]="true"
                (click)="loginWithRedirect()">
                <i class="pi pi-sign-in text-base lg:text-2xl mr-2 lg:mr-0"></i>
                <span class="block lg:hidden font-medium">Login</span>
            </a>
        </li>
            <li *ngIf="auth.user$ | async as user" class="lg:relative">
                <a pRipple
                class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150"
                pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden"
                leaveActiveClass="fadeout" [hideOnOutsideClick]="true">
                    <img [src]="user.picture" class="mr-3 lg:mr-0 rounded-circle"
                        style="width: 28px; height: 28px; border-radius: 50%" />
                    <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
                </a>
                <ul
                class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
                <li class="relative">
                        <a pRipple
                        pRipple
                        class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150"
                        pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden"
                        leaveActiveClass="fadeout" [hideOnOutsideClick]="true" (click)="logout()">
                            <i class="pi pi-sign-out mr-2"></i>
                            <span class="font-medium">Logout</span>

                        </a>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
</div>
So, is there a way of closing the menu panel after clicking one of the item in the list?

Thanks!

Post Reply

Return to “PrimeBlocks for PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests