# presentation/widgets/menu.widget.ts

> 30 lines of code and 7 definitions.

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

## Definitions

- `unsubscribe` (lexical_declaration, line 24, exported)
- `mountMenu` (lexical_declaration, line 19, exported)
- `markActive` (lexical_declaration, line 11)
- `active` (lexical_declaration, line 13)
- `buttons` (lexical_declaration, line 20, exported)
- `bar` (lexical_declaration, line 21, exported)
- `search` (lexical_declaration, line 22, exported)

## Source

```typescript
import { PAGE_ATTRIBUTE, createMenuButton } from "#presentation/components/menu.component";
import { ACTIVE_CLASS } from "#configuration/constants/element.constants";
import type { Disposer } from "#types/base.types";
import { MAIN_NAVIGATION_LABEL } from "#configuration/strings/menu.strings";
import { ROUTE_CHANGED } from "#core/ids/route.ids";
import { attachSearchToggle } from "#presentation/components/search.component";
import { createElement } from "#core/factories/element.factory";
import { listPages } from "#domain/registries/page.registry";
import { subscribeEvent } from "#core/buses/base.bus";

const markActive = function markActive(buttons: readonly Element[], page: string): void {
    for (const item of buttons) {
        const active = item.getAttribute(PAGE_ATTRIBUTE) === page;
        item.classList.toggle(ACTIVE_CLASS, active);
        item.setAttribute("aria-current", active ? "page" : "false");
    }
};

export const mountMenu = function mountMenu(container: HTMLElement): Disposer {
    const buttons = listPages().map(createMenuButton);
    const bar = createElement("nav", { attributes: { "aria-label": MAIN_NAVIGATION_LABEL }, className: "tab-bar" });
    const search = attachSearchToggle(bar, buttons);
    container.replaceChildren(bar);
    const unsubscribe = subscribeEvent(ROUTE_CHANGED, (event) => {
        markActive(buttons, event.page);
    });
    return () => {
        unsubscribe();
        search.dispose();
        container.replaceChildren();
    };
};
```