How To Use

You will need to define first the Dropdown menu, giving it a unique ID that you cant define again in the whole project. To create one you need to use the Pendulo component you can define it directly in the component/page you are going to use it or just create a component that return the menu so you can use it multiple times. Also you will need to import the styles for the project.

import { Pendulo, Item } from 'pendulo-dropdown'
import 'pendulo-dropdown/styles.css'

// Let's create a component that will be the Menu we are going to re-use on every page we want it to appear.

export function UserMenu() {
    return (
        <Pendulo id="userMenu">
            
        </Pendulo>
    )
}

// Now we have the "container" that will be rendered once user interact with our context menu, we will need to use the Item component, where we can add the options they can select from.

import { Pendulo, Item } from 'pendulo-dropdown'
import { useRouter } from "next/navigation";
// 

export function UserMenu() {
    const router = useRouter();

    return (
        <Pendulo id="userMenu">
            <Item text="Profile" onClick={() => router.push("/profile")}/>
            <Item text="Twitter" onClick={() => window.location.href = "https://x.com/"}/>
            <Item text="Log Out" onClick={() => console.log('Logout logic')}/>
        </Pendulo>
    )
}

So now you will say ok, we did the Menu, how am i going to show it to user? Well we got the component that will use the dropdown, once you want to use it you can do it this way.

import { useMenu } from "pendulo-dropdown";
import { UserMenu } from '@/components/UserMenu'

export default function Page() {
    const { show } = useMenu()
    return (
        <main>
            <button onClick={(event: React.MouseEvent) => show({ id: 'userMenu', event })}>Click me to render the context menu</button>
            <UserMenu />
        </main>
    )
}