@props([
    'title' => config('app.name', 'App'),
])

<header 
    {{ $attributes->merge([
        'class' => 'fluent-header',
        'data-sidebar' => '#sidebar' // bisa di override
    ]) }}
>

    <div class="fluent-header-left">
        <button 
            aria-label="Sidebar Toggle"
            type="button"
            class="fluent-header-toggle"
            data-toggle="sidebar"
        >
            <span class="fluent-header-hamburger"></span>
        </button>

        <div class="fluent-header-title">
            {{ $title }}
        </div>
    </div>

    @isset($center)
        <div class="fluent-header-center">
            {{ $center }}
        </div>
    @endisset

    <div class="fluent-header-right">
        {{ $slot }}
    </div>

</header>