Sidebar

The sidebar is a vertical action menu placed to the left or right of your UI layout. It supports nested submenus, icons, images, and dataset-driven interactivity.

---

Structure

sidebar = {
    layout = { side = "right" }, -- or "left"
    sections = {
        {
            id = "test_1",
            label = "Sidebar Category",
            items = {
                {
                    id = "some_option",
                    label = "Some Option",
                    image = "assets/logos/bd_100.png",
                    action = "some_action"
                },
                {
                    id = "some_other_option",
                    label = "Some Other Option",
                    icon = "fas fa-box",
                    action = "some_other_action",
                    submenu = {
                        { id = "some_submenu_option_1", label = "Some Submenu Option", on_action = function(data) ... end },
                        { id = "some_submenu_option_2", label = "Some Other Submenu Option", on_action = function(data) ... end }
                    }
                }
            }
        }
    }
}

You can define multiple sections and group your interactions logically by category.

---

Item Options

Each section contains a list of items. These support:

Field	Description
id	Unique identifier used for click callbacks.
label	Text label shown in the sidebar.
action	Action string sent to the client (Lua) for routing.
icon	Font Awesome icon class.
image	Local or web image path.
submenu	Optional array of sub-options, shown on click.

Submenu items are structured identically but don’t support icons or images.

---

Layout

You can place the sidebar on either side:

layout = { side = "left" } -- or "right"

Internally, this maps to a .sidebar.left or .sidebar.right class with automatic CSS control.