<div class="mobile-menu-wrapper">
    <div class="mobile-menu-overlay"></div>

    <a href="#" class="mobile-menu-close"><i class="close-icon"></i></a>

    <div class="mobile-menu-container scrollable">
        <form action="#" method="get" class="input-wrapper">@csrf
            <input type="text" class="form-control" name="search" autocomplete="off" placeholder="Search"
                required />
            <button class="btn btn-search" type="submit">
                <i class="w-icon-search"></i>
            </button>
        </form>
        
        <div class="tab">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a href="#categories" class="nav-link active">Categories</a>
                </li>
                <li class="nav-item">
                    <a href="#main-menu" class="nav-link">Main Menu</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane active" id="categories">
                <ul class="mobile-menu">
                    @foreach($cats as $c)
                    <li><a href="#"><i class="w-icon-home"></i>{{$c->cat_name}}</a></li>  
                    @endforeach  
                </ul>
            </div>

            <div class="tab-pane" id="main-menu">
                <ul class="mobile-menu">
                    <li><a href="{{url('/')}}">Home</a></li>                            
                    <li><a href="{{url('about')}}">About Us</a></li>
                    <li><a href="{{url('gallery')}}">Gallery</a></li>                            
                    <li><a href="{{url('news')}}">News</a></li>
                    <li><a href="{{url('contact')}}">Contact Us</a></li>                                       
                    <li><a href="{{url('faqs')}}">FAQs</a></li>  
                </ul>
            </div>
        </div>
    </div>
</div>