# XWUIOpsShellApp

Pre-configured XWUIShellApp wrapper for the Ops broadcast-operations product. It authors the canonical Ops sidebar once via `buildOpsMenu()` - a 7-group XWUIMenuModel (Dashboard/Executive/AI Assistant, plus Projects & Scheduling, AI Planner, Resources, Operations, HR, Commercial, and a pinned Reports) whose node keys mirror the `/en/...` route paths so `conf_comp.autoSyncRoute` can map `location.pathname` to the active node. The header chrome composes a locale toggle, a notification bell with unread badge (`data.notifications`), a theme toggle, and a user avatar/profile button (`data.user`). Pages mount via `data.main` (HTMLElement or HTML string, typically an XWUIOps<Domain>Page); `setActiveRoute(key, main)` swaps page + sidebar highlight without rebuilding the shell. Defaults: dashboard layout, tree nav, 260px expanded sidebar, ltr.

## Basic Usage

Mounts the Ops shell for "M. Alshehri" (Operations Manager) with 6 unread notifications, the Dashboard node active, and a placeholder HTML page in the main slot.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Ops shell with user, 6 notifications, active Dashboard key, and a placeholder main page.
```

## Arabic RTL + Dark

The shell flipped to RTL with the dark theme, Arabic locale, and a collapsed sidebar for an Arabic-speaking operator.

```example
file: examples/ArabicDark.ts
title: Arabic RTL + Dark
description: rtl direction, dark theme, ar locale, collapsed sidebar, and a bilingual user.
```

## Resources Section Active

A deep-route example with the Warehouse node active inside the Resources accordion and a widened sidebar.

```example
file: examples/ResourcesActive.ts
title: Resources Section Active
description: activeKey "warehouse" highlights deep in the sidebar; nav/profile/notifications callbacks wired.
```

```api
```
