<div class="mobile-navigation">
    <header>
        <div class="mobile_btn nav"><span class="icon"></span></div>
        <a class="logo" href="/"></a>
        <div class="mobile_btn contact"><span class="icon"></span></div>
    </header>

    <section class="mb_content scrollable">
        <nav id="mobile_nav">
            <ul class="inner">

                @foreach($navigation->main() as $pageEntity)

                    @if( ! $pageEntity->hasSubmenu())

                    <li @if($pageEntity->isActive($currentPageEntity)) class="active" @endif >
                        <a class="title" href="{{ $pageEntity->route }}" data-state="{{ $pageEntity->name }}">
                            {{ $pageEntity->label }}
                        </a>
                    </li>

                    @elseif( $pageEntity->name == 'services')
                        <li class="mb_dropdown">
                            <span class="title"><span class="dd_arrow"></span>{{ $pageEntity->label }}</span>
                            <ul>
                                @foreach($navigation->services() as $subEntity)
                                    <li @if($subEntity->route == $currentPageEntity->route) class="active" @endif >
                                        <a class="title" href="{{ $subEntity->route }}" data-state="{{ $subEntity->name }}">
                                            {{ $subEntity->label }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>

                    @elseif( $pageEntity->name == 'practice')
                        <li class="mb_dropdown">
                            <span class="title"><span class="dd_arrow"></span>{{ $pageEntity->label }}</span>
                            <ul>
                                @foreach($navigation->practice() as $subEntity)
                                    <li @if($subEntity->route == $currentPageEntity->route) class="active" @endif >
                                        <a class="title" href="{{ $subEntity->route }}" data-state="{{ $subEntity->name }}">
                                            {{ $subEntity->label }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    @endif

                @endforeach

            </ul>
        </nav>

        <div id="mobile_contact">
            <div class="inner">
                <span class="title">Tandarts Maas</span>
                <p>
                    Nieuwstraat 59<br />
                    6021 HR Budel
                </p>
                <span class="data_title">tel</span><a href="tel:+31495585858" target="_self">+31 (0)495 – 58 58 58</a><br />
                <span class="data_title">mob</span><a href="tel:+31616526677" target="_self">+31 (0)6 – 16 52 66 77</a><br />
                <span class="data_title">e-mail</span><a href="mailto:info@tandartsmaas.nl" target="_blank">info@tandartsmaas.nl</a>
            </div>
        </div>

    </section>
    <div class="blur"></div>
</div>