<nav class="ma-bottom-nav d-xl-none" aria-label="{{ __('Navegação inferior') }}">
    <a href="{{ route('mobiangra.index') }}"
        @class(['ma-bottom-nav__item', 'ma-bottom-nav__item--active' => request()->routeIs('mobiangra.index')])>
        <i class="fa-solid fa-house" aria-hidden="true"></i>
        <span>{{ __('Início') }}</span>
    </a>
    <a href="{{ route('mobiangra.horarios') }}"
        @class(['ma-bottom-nav__item', 'ma-bottom-nav__item--active' => request()->routeIs('mobiangra.horarios')])>
        <i class="fa-solid fa-bus" aria-hidden="true"></i>
        <span>{{ __('Linhas') }}</span>
    </a>
    <button type="button" class="ma-bottom-nav__search" id="ma-bottom-search"
        aria-label="{{ __('Buscar linha ou destino') }}">
        <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
    </button>
    <a href="{{ route('mobiangra.mapa') }}"
        @class(['ma-bottom-nav__item', 'ma-bottom-nav__item--active' => request()->routeIs('mobiangra.mapa')])>
        <i class="fa-solid fa-map-location-dot" aria-hidden="true"></i>
        <span>{{ __('Mapa') }}</span>
    </a>
    <button type="button" class="ma-bottom-nav__item" data-bs-toggle="offcanvas"
        data-bs-target="#maMoreMenu" aria-controls="maMoreMenu" aria-label="{{ __('Mais serviços') }}">
        <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
        <span>{{ __('Mais') }}</span>
    </button>
</nav>

<div class="offcanvas offcanvas-bottom ma-more-menu" tabindex="-1" id="maMoreMenu"
    aria-labelledby="maMoreMenuLabel">
    <div class="offcanvas-header">
        <h2 class="offcanvas-title h5" id="maMoreMenuLabel">{{ __('Mais serviços') }}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
            aria-label="{{ __('Fechar') }}"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="ma-more-menu__list">
            <li>
                <a href="{{ route('mobiangra.passageiro_cidadao') }}">
                    <i class="fa-solid fa-id-card" aria-hidden="true"></i>
                    {{ __('Passageiro Cidadão') }}
                </a>
            </li>
            <li>
                <a href="{{ route('mobiangra.informacoes') }}">
                    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
                    {{ __('Informações ao usuário') }}
                </a>
            </li>
            <li>
                <a href="{{ route('mobiangra.fale_conosco') }}">
                    <i class="fa-solid fa-comments" aria-hidden="true"></i>
                    {{ __('Fale Conosco') }}
                </a>
            </li>
        </ul>
    </div>
</div>
