# 📑 Menus

This project includes a powerful **built-in menu system** to simplify modals, dialogs, and menu navigation. It allows for stack-based menu management and supports confirmation dialogs out of the box.

***

## 🧩 Setting Up the Menu Handler

To start using the menu system, you need to initialize the global menu handler reference in your component:

```tsx
import { useMenuHandler } from "src/_components/menuHandler";
import { setMenuHandlerRef } from "src/_functions/menuHandler";

export default function Home() {
    const ref = useMenuHandler();
    setMenuHandlerRef(ref);

    return (
        <button
          className="min-w-40 px-6 rounded-md cursor-pointer h-10 bg-blue-500 text-white"
          onClick={() => {
            ref.open(
              <div>hey</div>, {
                dimBackground: true,      // boolean — dims the background behind the menu
                background: 'bg-white',   // string — custom Tailwind CSS background color class
                size: 'md'                // string — menu size: 'sm' | 'md' | 'lg' (default: 'md')
              }
            );
          }}
        >
          click me to open external menu
        </button>
    )
}
```

This will slide in a custom menu overlay. You can open multiple menus, and the system will handle the **stack behavior** (sliding in/out automatically).

These options let you tailor the menu overlay for different use cases and UI styles.

| Option          | Type    | Description                                         | Default    |
| --------------- | ------- | --------------------------------------------------- | ---------- |
| `dimBackground` | boolean | Whether to darken/dim the background behind menu    | `true`     |
| `background`    | string  | CSS class for background color (e.g., `bg-blue-50`) | `bg-white` |
| `size`          | string  | Menu size controlling max width and padding         | `'md'`     |

***

## 🧷 Confirm Dialog (Built-in)

There’s a **default confirmation dialog** component you can use without writing a full modal yourself.

<pre class="language-tsx"><code class="lang-tsx"><strong>import { confirmDialog } from "src/_components/confirmMenu";
</strong>
&#x3C;button
  className="w-20 rounded-md cursor-pointer h-8 bg-red-500 text-white"
  onClick={async () => {
    const result = await confirmDialog({
      title: 'test',
      content: &#x3C;p>test &#x3C;strong>test2&#x3C;/strong>&#x3C;/p>,
      input: 'test' // optional
    });

    console.log(result); // true (accepted) or false (cancelled)
  }}
>
  open
&#x3C;/button>

</code></pre>

| Option    | Type                  | Description                                                                            | required |
| --------- | --------------------- | -------------------------------------------------------------------------------------- | -------- |
| `title`   | string                | Will be the large text at the top                                                      | `true`   |
| `content` | string \| HTMLElement | You can type any html code or just a simple string in here to provide extra context    | `false`  |
| `input`   | string                | If you provde an input value the user needs to type this value before they can accept. | `false`  |