Open DaliborTrampota opened 1 year ago
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>
}
Hi,
I have this component
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