# Menu Wrapper API

## Dispatched Events

The component dispatches these custom events from its own element when the breakpoint state changes:

| Event Name            | Detail | Description                       |
| --------------------- | ------ | --------------------------------- |
| `menuWrapper:mobile`  | None   | Fired when entering mobile view.  |
| `menuWrapper:desktop` | None   | Fired when entering desktop view. |

***

### Examples

#### Detecting Mobile/Desktop Transitions

```javascript
const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Listen for mobile view entry
menuWrapper.addEventListener("menuWrapper:mobile", () => {
  console.log("Switched to mobile view");
  
  // Example: Initialize mobile-specific features
  initMobileGestures();
});

// Listen for desktop view entry
menuWrapper.addEventListener("menuWrapper:desktop", () => {
  console.log("Switched to desktop view");
  
  // Example: Clean up mobile features
  destroyMobileGestures();
});
```

#### Checking Current Viewport State

```javascript
const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Check if currently in mobile view
function isMobileView() {
  return menuWrapper.classList.contains("mobile");
}

// Check if currently in desktop view
function isDesktopView() {
  return menuWrapper.classList.contains("desktop");
}

// Check mobile menu mode
function getMobileMode() {
  if (menuWrapper.classList.contains("off-canvas-mode")) {
    return "off-canvas";
  } else if (menuWrapper.classList.contains("reveal-mode")) {
    return "reveal";
  }
  return null; // Desktop mode
}

// Example usage
if (isMobileView()) {
  console.log(`Mobile mode: ${getMobileMode()}`);
}
```

#### Integration with Toggle Component

```javascript
const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Listen for menu open/close via Toggle component
menuWrapper.addEventListener("toggle:change", (e) => {
  const { id, isEnabled } = e.detail;
  
  if (isEnabled) {
    console.log("Menu opened");
    // Track analytics, pause videos, etc.
  } else {
    console.log("Menu closed");
    // Resume content, clean up state
  }
});

// Programmatically control the menu via Toggle API
const menuToggle = window.Toggles.findByTarget("main-nav")[0];

// Open the mobile menu
menuToggle.enable();

// Close the mobile menu
menuToggle.disable();

// Check if menu is open
if (menuToggle.isEnabled) {
  console.log("Menu is currently open");
}
```

#### Responsive Behavior Coordination

```javascript
const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Close mobile menu when switching to desktop
menuWrapper.addEventListener("menuWrapper:desktop", () => {
  // Find all toggles targeting this menu and disable them
  const toggles = window.Toggles.findByTarget(menuWrapper.id);
  toggles.forEach(toggle => {
    if (toggle.isEnabled) {
      toggle.disable();
    }
  });
  
  // Remove body scroll lock if present
  document.body.classList.remove("menu-open", "scroll-locked");
});

// Coordinate with dropdown mode changes
document.addEventListener("menuDropdown:modeChange", (e) => {
  const { newMode } = e.detail;
  
  // When dropdowns switch to stacked mode, we're in mobile
  if (newMode === "stacked") {
    console.log("Dropdowns now in stacked mobile mode");
  }
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nickarce.com/javascript-api/menu-wrapper-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.