<!-- Creación de Menú Off canvas -->

  <div class="containermenu hide-off">

    <div class="mainmenuoffcanvas as-nav__main">

      <div class="as-nav__main-header justify-content-center p-0">

        <button type="button" class="btn btn-close-offmenu pr7" data-bs-dismiss="offcanvas" aria-label="Close">
          <i class="fas fa-arrow-alt-circle-left"></i>
          Menú Principal
        </button>

      </div>


      <div class="p-0">

        <nav class="navbar navbar-light p-0">

          <ul class="navbar-nav as-nav__menu w-100" role="navigation">

            <!-- Buscador Menú -->

            <li class="nav-item p-2 as-search__menu">
                <form action="{{ url('productos/') }}">
                  <div class="input-group">
                    <input type="text" class="form-control" name="q" value="" placeholder="Buscar Producto y más.." aria-label="Search" autocomplete="off">
                    <div class="input-group-append">
                        <button class="btn btn-search-mobile" type="submit">
                            <i class="fas fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                  </div>
                </form>
            </li>

            <!-- Fin Buscador -->

            
            @foreach($menus as $k=>$m)
              @if(!$m['sub_menu'])
                <li class="nav-item">
                  <a href="#" class="nav-link as-menu_lv1 menu-lv1-sty px-3" title="{{$m['nombre']}}">
                    @if($m['icono']!="")
                      <img src="{{asset($m['icono'])}}" alt="Menu Icono" title="Menu Icon" style="height:18px;" /> 
                    @endif         
                    <span>{{$m['nombre']}}</span>
                  </a>
                </li>

              @else 

              <li class="nav-item">
                <a href="#" class="nav-link as-menu_lv1 menu-lv1-sty px-3" title="{{$m['nombre']}}">
                  @if($m['icono']!="")
                    <img src="{{asset($m['icono'])}}" alt="Menu Icono" title="Menu Icon" style="height:18px;" /> 
                  @endif         
                  <span>{{$m['nombre']}}</span>
                  <span class="toggle__icon ms-auto">
                    <i class="fas fa-chevron-down" aria-hidden="true"></i>
                  </span>
                </a>

                  <div class="as-menu_lv2-desktop" style="width: 35rem;">
                      <div class="as-menu_lv2-title as-menu_lv2-bar-sty d-flex justify-content-between align-items-center">
                          {{$m['nombre']}}
                          <a href="#" class="">ver todo</a>
                      </div>    

                      <div class="p-0 scroll-menu as-menu_lv2-body">
                      
                        <ul class="w-100" style="width: 18rem;">
                          @foreach($m['sub_menu'] as $k=>$me)
                              <li class="no-border w-100"><a href="{{$me['link']}}" class="site-nav w-100">@if($me['icono']!="")<img src="{{asset($me['icono'])}}" alt="Menu Icono" title="Menu Icon" style="height:18px; margin-right:2px; margin-bottom:4px;" /> @endif {{$me['nombre']}}</a></li>
                          @endforeach
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>

                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">GAAAA</a></li>
                        </ul>

                        </div>
           
                  </div>
                  
              </li>

              @endif
            @endforeach


            <li class="nav-item">
              <a href="#" class="nav-link as-menu_lv1 menu-lv1-sty px-3" title="Inicio">Productos</a>

              <ul>
                <li><a class ="nav-link" href="">Producto 1</a></li>
                <li><a class ="nav-link" href="">Producto 2</a></li>
                <li><a class ="nav-link" href="">Producto 3</a></li>
                <li><a class ="nav-link" href="">Producto 4</a></li>
                <li><a class ="nav-link" href="">Producto 5</a></li>
              </ul>

            </li>
            <li class="nav-item">
              <a href="#" class="nav-link as-menu_lv1 menu-lv1-sty px-3" title="Inicio">Servicios</a>

              <div class="as-menu_lv2-desktop" style="width: 35rem;">
                      <div class="as-menu_lv2-title as-menu_lv2-bar-sty d-flex justify-content-between align-items-center">
                      Servicios
                          <a href="#" class="">ver todo</a>
                      </div>    

                      <div class="p-0 scroll-menu as-menu_lv2-body">
                      
                        <ul class="w-100" style="width: 18rem;">
                        
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>

                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li><li class="no-border w-100"><a class="site-nav w-100" href="">Producto 1</a></li>
                              <li class="no-border w-100"><a class="site-nav w-100" href="">GAAAA</a></li>
                        </ul>

                        </div>
           
                  </div>


            </li>

          </ul> 


        </nav>

      </div>

     

    </div>

  </div>

<!-- Fin de Menú Off Canvas -->