I'll help you create a modern dashboard topbar navbar that matches your existing UI style. Let me first explore your codebase to understand the current design system and components.

Now let me check the existing layout and page structure:

Now I have a clear understanding of your design system. Let me create a comprehensive dashboard topbar with all the requested features. I'll create several files:

1. A reusable Topbar component
2. A demo page showing it in action

I've created a production-ready dashboard topbar component with all the features you requested. Here's what's included:

Key Features:

• Page title/breadcrumbs on the left that adapt to screen size
• Desktop search bar with search icon and full-width input
• Notification bell with customizable unread badge
• Theme toggle for light/dark mode switching
• Settings icon for quick access
• User profile dropdown with avatar, email, and menu items (Profile, Settings, Billing, Help, Logout)

Responsive Design:

• Desktop: Full layout with search bar, all icons visible, and breadcrumbs
• Tablet: Reduced spacing, search available, core actions visible
• Mobile: Hamburger menu with collapsible actions, search bar in dropdown, essential features only

Design Details:

• Matches your existing design tokens (colors, typography, spacing)
• Sticky positioning with backdrop blur effect
• Smooth hover states and focus indicators for accessibility
• Unread notification badges with animated appearance
• Profile avatar with auto-generated fallback initials
• All components use your existing shadcn/ui library

The demo page shows the topbar in action with a sample dashboard layout. Customize the userMenu prop, breadcrumbs, and callback functions to fit your specific needs!