📑 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:

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.

import { confirmDialog } from "src/_components/confirmMenu";

<button
  className="w-20 rounded-md cursor-pointer h-8 bg-red-500 text-white"
  onClick={async () => {
    const result = await confirmDialog({
      title: 'test',
      content: <p>test <strong>test2</strong></p>,
      input: 'test' // optional
    });

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

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