@props(['title' => 'Dashboard'])

<header class="sticky top-0 z-30 border-b border-transparent bg-booklio-background/90 px-4 py-4 backdrop-blur sm:px-6 lg:px-8">
    <div class="flex min-h-14 items-center justify-between gap-4">
        <div class="flex min-w-0 items-center gap-3">
            <button type="button" data-open-sidebar class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-booklio-border bg-white text-slate-700 shadow-soft lg:hidden">
                <x-ui.icon name="menu" class="h-5 w-5" />
            </button>

            <h1 class="min-w-0 max-w-[calc(100vw-112px)] whitespace-normal break-words text-[26px] font-extrabold leading-tight tracking-tight text-booklio-dark sm:max-w-none sm:text-[32px]">
                {{ $title }}
            </h1>
        </div>

        <x-admin.global-dropdowns variant="desktop" />
    </div>

    <x-admin.global-dropdowns variant="mobile" />
</header>
