<!-- source-hash: 898258d76810df35b3a9175ed9b09824 -->
Responsive application header component for the OpenFrame platform, providing navigation controls, search, organization filtering, notifications, and user account management across mobile and desktop breakpoints.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `AppHeader` | `React.memo` component | Main header component with full prop-driven configuration |
| `AppHeaderProps` | Interface | Full prop contract for the header |
| `NotificationsHeaderButton` | Internal component | Bell icon button with unread badge, integrates with `NotificationsContext` |

## Props Overview

| Prop | Type | Description |
|------|------|-------------|
| `isMobileMenuOpen` | `boolean` | Required; controls burger menu icon state |
| `onToggleMobileMenu` | `() => void` | Callback to toggle the mobile sidebar |
| `disabled` | `boolean` | Dims all controls except the mobile burger toggle |
| `showSearch` | `boolean` | Renders global search (desktop) or search button (mobile) |
| `showOrganizations` | `boolean` | Renders org filter dropdown (large screens only) |
| `showNotifications` | `boolean` | Renders notification bell with unread badge |
| `showUser` | `boolean` | Renders user avatar + dropdown (desktop only) |

## Usage Example

```typescript
import { AppHeader } from './app-header'

export function Shell() {
  const [mobileOpen, setMobileOpen] = React.useState(false)

  return (
    <AppHeader
      isMobileMenuOpen={mobileOpen}
      onToggleMobileMenu={() => setMobileOpen(prev => !prev)}
      showSearch
      onSearch={(query) => console.log(query)}
      showOrganizations
      organizations={[{ id: 'org-1', name: 'Acme Corp' }]}
      selectedOrgId="org-1"
      onOrgChange={(id) => console.log(id)}
      showNotifications
      unreadCount={3}
      showUser
      userName="Jane Doe"
      userEmail="jane@acme.com"
      onProfile={() => router.push('/profile')}
      onLogout={() => signOut()}
    />
  )
}
```

## Behavior Notes

- **Responsive layout:** Mobile renders a burger icon + logo; desktop shows the full search bar and org filter
- **Disabled state:** Setting `disabled={true}` applies `pointer-events-none opacity-50` to all controls except the mobile menu toggle
- **Notifications:** Prefers live unread count from `NotificationsContext` when available, falls back to the `unreadCount` prop; switches between `BellIcon` and `BellRingingIcon` based on count