@extends('layouts.master')

@section('body-class', 'bg-body-background')

@section('page-content')

<div class="d-flex flex-row pb-5">

    <x-menus.collapsable-responsive-sidebar 
        target-offcanvas="sidebar-menu-offcanvas"
        target-collapse="sidebar-menu-collapse"
        collapse-width="250"
    />

    <div class="d-flex flex-column w-100">

        <nav class="navbar navbar-expand navbar-dark bg-dark sticky-top " aria-label="Second navbar example">
            <div class="container-fluid">

                <a href="#" data-bs-target="#sidebar-menu-collapse" data-bs-toggle="collapse" class="d-none d-md-block text-white" role="button" ><i class="bi bi-list"></i> </a>
                <a href="#" data-bs-target="#sidebar-menu-offcanvas" data-bs-toggle="offcanvas" class="d-block d-md-none text-white" role="button" ><i class="bi bi-list"></i> </a>
                
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link d-block d-md-none" aria-current="page" href="/">{{ env('APP_NAME') }}</a>
                    </li>
                </ul>
                
                {{-- <a href="#" class="text-white me-3" role="button" ><i class="bi bi-search"></i> </a> --}}
            </div>
        </nav>

        <div class="p-0 m-0 w-100 " id="gesturedZone">
            @yield('content')
        </div>

    </div>
    
</div>


@endsection