@foreach ($categories as $category)
    @if (count($category->child) == 0)
        <li class="category" id="cpcategory-{{ $category->id }}">
            <a class="dropdown-item" href="{{ route('productByCategory', $category->slug) }}" data-depth="0">
                {{ $category->name }}
            </a>
        </li>
    @else
        <li class="category" id="cpcategory-{{ $category->id }}">
            <a class="dropdown-item" href="{{ route('productByCategory', $category->slug) }}" data-depth="0">
                <span class="pull-xs-right">
                    <!-- Desktop Icons -->
                    <span class="desktop-category-icons">
                        <i class="material-icons left">&#xE315;</i>
                        <i class="material-icons right">&#xE314;</i>
                    </span>
                    <!-- Mobile Icons -->
                    <span class="mobile-category-icons navbar-toggler collapse-icons" data-target="#top_sub_menu_{{ $category->id }}" data-toggle="collapse">
                        <i class="material-icons add">&#xe145;</i>
                        <i class="material-icons remove">&#xE15B;</i>
                    </span>
                </span>
                {{ $category->name }}
            </a>
            <div class="popover sub-menu js-sub-menu collapse" id="top_sub_menu_{{ $category->id }}">
                <ul class="cp_sf-menu top-menu" data-depth="1">
                    @foreach ($category->child as $child)
                        <li class="category" id="cpcategory-{{ $child->id }}">
                            <a class="dropdown-item" href="{{ route('productByCategory', $child->slug) }}" data-depth="1">
                                {{ $child->name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </li>
    @endif
@endforeach

<style>
/* Default: show desktop icons, hide mobile icons */
.desktop-category-icons { display: inline-block; }
.mobile-category-icons { display: none; }

/* When inside the mobile sidevertical-menu: show mobile icons, hide desktop icons */
.sidevertical-menu .desktop-category-icons { display: none !important; }
.sidevertical-menu .mobile-category-icons { display: inline-block !important; }
</style>