Hide PopoverPanel on href/link click

[DaliborTrampota]

Hi,

I have this component

function ProfileButton() {
    const { logged, user, login, logout } = useAuth()

    return <Show
            when={logged() && user()}
            fallback={<LoginIcon class="h-10 w-10 rounded-md cursor-pointer hover:bg-white hover:bg-opacity-25 p-1" onClick={login}/>}
        >
            <Popover class="relative text-dark" defaultOpen={false}>
                {({ isOpen }) => (
                    <>
                        <div>
                            <PopoverButton class="menu-btn">
                                <ChevronUp class={`${!isOpen() && 'rotate-180'} w-6 h-6 text-dark self-center ml-1 sm:block hidden transition ease-out duration-100`}/>
                                <p class='mx-2 text-lg font-medium sm:block hidden'>{user().username}</p>
                                <img class="sm:h-10 sm:w-10 h-12 w-12 rounded-full" src={`https://cdn.discordapp.com/avatars/${user().id}/${user().avatar}.png?size=512`} alt="profile"/>
                            </PopoverButton>
                        </div>
                        <Transition
                            show={isOpen()}
                            enter="transition ease-out duration-100"
                            enterFrom="transform opacity-0 scale-95"
                            enterTo="transform opacity-100 scale-100"
                            leave="transition ease-in duration-75"
                            leaveFrom="transform opacity-100 scale-100"
                            leaveTo="transform opacity-0 scale-95"
                        >
                            <PopoverPanel class="nav-menu">
                                <Menu>
                                    <MenuItem>
                                        <A href="/profile" class="nav-menu-item">Your Profile</A>
                                        {/* <A href="/profile/connections" class="nav-menu-item">Connections</A> */}
                                        <Show when={user().admin}>
                                            <A href="/admin/premium" class="nav-menu-item">Admin Panel</A>
                                        </Show>
                                    </MenuItem>
                                    <MenuItem>
                                        <div onClick={logout} id="logout-btn">Sign Out</div>
                                    </MenuItem>
                                </Menu>
                            </PopoverPanel>
                        </Transition>
                    </>
                )}
            </Popover>
        </Show>
}

I want the to hide/close the popover panel when an component is clicked (from solid-router redirect/navigate) how can I achieve that?

also on the vercel page are only 4 components shown? is that correct? or is it wrong link? and lastly, is there a discord server for this package?

thanks

you can use the close() function provided by the Popover component's props. This function allows you to programmatically close the popover menu when a user clicks on an item.

Here's an updated version of your component:

function ProfileButton() {
    const { logged, user, login, logout } = useAuth()

    return <Show
            when={logged() && user()}
            fallback={<LoginIcon class="h-10 w-10 rounded-md cursor-pointer hover:bg-white hover:bg-opacity-25 p-1" onClick={login}/>}
        >
            <Popover class="relative text-dark" defaultOpen={false}>

                {({ isOpen, close }) => (
                    <>
                        <div>
                            <PopoverButton class="menu-btn">
                                <ChevronUp class={`${!isOpen() && 'rotate-180'} w-6 h-6 text-dark self-center ml-1 sm:block hidden transition ease-out duration-100`}/>
                                <p class='mx-2 text-lg font-medium sm:block hidden'>{user().username}</p>
                                <img class="sm:h-10 sm:w-10 h-12 w-12 rounded-full" src={`https://cdn.discordapp.com/avatars/${user().id}/${user().avatar}.png?size=512`} alt="profile"/>
                            </PopoverButton>
                        </div>
                        <Transition
                            show={isOpen()}
                            enter="transition ease-out duration-100"
                            enterFrom="transform opacity-0 scale-95"
                            enterTo="transform opacity-100 scale-100"
                            leave="transition ease-in duration-75"
                            leaveFrom="transform opacity-100 scale-100"
                            leaveTo="transform opacity-0 scale-95"
                        >
                            <PopoverPanel class="nav-menu">
                                <Menu>
                                    <MenuItem>

                                        <A href="/profile" onClick={() => close()} class="nav-menu-item">Your Profile</A>
                                        {/* <A href="/profile/connections" class="nav-menu-item">Connections</A> */}
                                        <Show when={user().admin}>
                                            <A href="/admin/premium" onClick={() => close()} class="nav-menu-item">Admin Panel</A>
                                        </Show>
                                    </MenuItem>
                                    <MenuItem>
                                        <div onClick={logout} id="logout-btn">Sign Out</div>
                                    </MenuItem>
                                </Menu>
                            </PopoverPanel>
                        </Transition>
                    </>
                )}
            </Popover>
        </Show>
}