@props(['title' => ''])
<x-layout :title="$title">
    <div class="flex h-screen overflow-hidden">
        <x-dashboard.broker.sidebar class="hidden shrink-0 md:w-50 lg:w-60 md:block md:h-screen"
                                    active-class="bg-linear-120 from-[#1a55ed] to-[#9b1cff] text-white"/>
        <section
            class=" flex flex-col space-y-4 md:space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">

            {{$heading ?? ''}}

            @session('success')
            <div class="wrapper">
                <x-ui.alert variant="success">{{$value}}</x-ui.alert>
            </div>
            @endsession

            @session('error')
            <div class="wrapper">
                <x-ui.alert variant="error">{{$value}}</x-ui.alert>
            </div>
            @endsession

            {{$slot}}
        </section>
    </div>
    @vite('resources/js/nav-menu.js')
</x-layout>