# presentation/components/menu.component.ts

> 20 lines of code and 3 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-components-menu-component-ts
Source text: https://banes-lab.com/assets/sources/source.85fd3c8d044ab91b49360442b44957ce83b71ec15097b5034d9bd36ba236f89e.generated.txt

## Definitions

- `createMenuButton` (lexical_declaration, line 9, exported)
- `PAGE_ATTRIBUTE` (lexical_declaration, line 7, exported)
- `button` (lexical_declaration, line 10, exported)

## Uses

- [core/buses/base.bus.ts](https://banes-lab.com/source/tree/core/buses/base.bus.ts.md)

## Source

```typescript
import { ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import type { PageEntry } from "#types/page.types";
import { ROUTE_REQUESTED } from "#core/ids/route.ids";
import { createElement } from "#core/factories/element.factory";
import { emitEvent } from "#core/buses/base.bus";

export const PAGE_ATTRIBUTE = "data-page";

export const createMenuButton = function createMenuButton(page: PageEntry): HTMLButtonElement {
    const button = createElement("button", {
        attributes: { [PAGE_ATTRIBUTE]: page.id, title: page.title, type: "button" },
        children: [
            createElement("i", { className: `${ICON_BASE_CLASS} ${page.icon}` }),
            createElement("span", { className: "tab-label", text: page.title }),
        ],
        className: `tab-button ${page.accent}`,
    });
    button.addEventListener("click", () => {
        emitEvent({ name: ROUTE_REQUESTED, page: page.id });
    });
    return button;
};
```