<nav class="navbar navbar-wrapper navbar-fade navbar-faded">
    <div class="container">
        <!-- Brand -->
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                <img class="light-logo" src="{{ asset('storage/'.config('settings.logo')) }}" alt="">
                <img class="dark-logo" src="{{ asset('storage/'.config('settings.logo')) }}" alt="">
            </a>

            <!-- Responsive toggle -->
            <div class="custom-burger" data-target="">
                <a id="" class="responsive-btn" href="javascript:void(0);">
                    <span class="menu-toggle">
                        <span class="icon-box-toggle">
                            <span class="rotate">
                                <i class="icon-line-top"></i>
                                <i class="icon-line-center"></i>
                                <i class="icon-line-bottom"></i>
                            </span>
                        </span>
                    </span>
                </a>
            </div>
            <!-- /Responsive toggle -->
        </div>

        <!-- Navbar menu -->
        <div class="navbar-menu">
                <a class="navbar-item is-slide" href="{{ route('home') }}">
                    home
                </a>

                @foreach($pages as $page)
                    @if(count($types) > 0 && $page->name == 'species')
                        <div class="navbar-item has-dropdown is-hoverable is-hidden-mobile">
                            <a class="navbar-link" href="{{ route('page', ['page' => $page->link]) }}">
                                {{ $page->name }}
                            </a>
                            <div class="navbar-dropdown is-boxed is-medium">
                                @foreach($types as $type)
                                    <a class="navbar-item is-menu" href="{{ route('species_details', ['species' => $type->id]) }}">
                                        <span>{{ $type->name }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
						<div class="mobile-drop is-hidden-desktop">
                            <div class="mobile-drop-trigger">
                                <span style="text-transform:capitalize">{{ $page->name }}</span>
								<i class="material-icons">keyboard_arrow_right</i>
                            </div>
                            <div class="child-menu" style="display: none;">
                                <ul>
									@foreach($types as $type)
										<li>
											<a href="{{ route('species_details', ['species' => $type->id]) }}">
												{{ $type->name }}
											</a>
										</li>
									@endforeach
                                </ul>
                            </div>
                        </div>
                    @else
                        <a class="navbar-item is-slide" href="{{ route('page', ['page' => $page->link]) }}">
                            {{ $page->name }}
                        </a>
                    @endif
                @endforeach

                <a class="navbar-item is-slide" href="{{ route('contact') }}">
                    contact us
                </a>
        </div>
    </div>
</nav>