App Bar

The App Bar component provides a responsive, flexible header navigation bar at the top of your application. It supports logo branding, dropdown sub-menus, integrated search boxes, quick action buttons, toggle switches, and a collapsible hamburger menu for mobile devices.

RoyalBar

<div class="app-bar">
    <!-- Brand / Logo -->
    <a href="#" class="app-bar-brand">
        <svg viewBox="0 0 100 80" width="28" height="28" fill="none" stroke="currentColor" stroke-width="6">
            <path d="M10,70 L25,30 L50,55 L75,30 L90,70 Z" />
            <ellipse cx="50" cy="73" rx="40" ry="6" />
        </svg>
        <span>RoyalBar</span>
    </a>

    <!-- Hamburger for Mobile Devices -->
    <button class="app-bar-hamburger">☰</button>

    <!-- Navigation Menu -->
    <ul class="app-bar-menu">
        <li><a href="#" class="app-bar-item">Home</a></li>
        
        <!-- Dropdown Sub-menu -->
        <li class="dropdown" data-role="dropdown">
            <button class="app-bar-item dropdown-toggle">About ▾</button>
            <ul class="dropdown-menu">
                <li><a href="#">Company</a></li>
                <li><a href="#">Team</a></li>
            </ul>
        </li>
        
        <li><a href="#" class="app-bar-item">Contact</a></li>
        
        <!-- Spacer for alignment -->
        <li style="flex-grow: 1;" class="hide-on-mobile"></li>

        <!-- Search Input -->
        <li>
            <div class="app-bar-search">
                <span>🔍</span>
                <input type="text" placeholder="Search...">
            </div>
        </li>

        <!-- Action Buttons -->
        <li>
            <button class="btn-app-bar icon-only"><span>🏃</span></button>
        </li>
        <li>
            <button class="btn-app-bar">Logout</button>
        </li>
    </ul>
</div>

Aesthetics & Structure

The container uses app-bar. By default it uses a sleek dark slate background compliant with both light/dark system customizers.
Use app-bar-brand to place logo icons/brand names on the far left.
Links or submenus should go inside <ul class="app-bar-menu"> wrapped inside <li> elements with class app-bar-item.
A spacer with inline style flex-grow: 1; will push items placed after it to the far right.
Supports embedded dropdown menus seamlessly out-of-the-box.