Application Header - Complete Demo

This is a fully functional demonstration of the Application Header component with all features enabled.

Try resizing your browser to see the mobile hamburger menu in action. The header adapts seamlessly to all screen sizes.

Press Ctrl+K or / to open the search modal. The search is debounced and supports keyboard navigation.

Click the bell icon to see notifications with badge count, unread indicators, and mark-as-read functionality.

Toggle dark mode using the moon icon. The preference is saved to localStorage and persists across sessions.

Click the grid icon to switch between multiple applications in your suite - perfect for enterprise environments.

The + icon provides quick access to common actions like creating new documents or uploading files.

Note: This is a standalone demo. In production, search and notifications would connect to your actual API endpoints.