top menu
This commit is contained in:
parent
c69e9b8407
commit
e173b611e3
|
|
@ -0,0 +1,36 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\View\Components\Grocery;
|
||||||
|
|
||||||
|
use App\Repositories\Catalog\CategoryRepository;
|
||||||
|
use App\Repositories\Catalog\GenderRepository;
|
||||||
|
use Closure;
|
||||||
|
use Illuminate\Contracts\View\View;
|
||||||
|
use Illuminate\View\Component;
|
||||||
|
|
||||||
|
class HeaderGenderDropdown extends Component
|
||||||
|
{
|
||||||
|
|
||||||
|
protected $categories = [];
|
||||||
|
protected $genders = [];
|
||||||
|
/**
|
||||||
|
* Create a new component instance.
|
||||||
|
*/
|
||||||
|
public function __construct(CategoryRepository $categoryRepository, GenderRepository $genderRepository)
|
||||||
|
{
|
||||||
|
$this->categories = $categoryRepository->getList([]);
|
||||||
|
$this->genders = $genderRepository->getList([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the view / contents that represent the component.
|
||||||
|
*/
|
||||||
|
public function render(): View|Closure|string
|
||||||
|
{
|
||||||
|
|
||||||
|
return view('components.grocery.header-gender-dropdown', [
|
||||||
|
'categories' => $this->categories,
|
||||||
|
'genders' => $this->genders,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,981 @@
|
||||||
|
<div class="container-xxl navbar-nav px-3 d-none d-lg-flex">
|
||||||
|
|
||||||
|
@foreach ($genders as $key => $value)
|
||||||
|
<div class="dropdown position-static pb-lg-2">
|
||||||
|
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0"
|
||||||
|
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
|
||||||
|
|
||||||
|
<span class="animate-target">{{ $value->name }}</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
|
||||||
|
|
||||||
|
<!-- Nav tabs -->
|
||||||
|
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase active" id="womens-tab"
|
||||||
|
data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab"
|
||||||
|
aria-controls="womens-tab-pane" aria-selected="true">
|
||||||
|
Women's
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab"
|
||||||
|
data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane"
|
||||||
|
aria-selected="false" tabindex="-1">
|
||||||
|
Men's
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab"
|
||||||
|
data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane"
|
||||||
|
aria-selected="false" tabindex="-1">
|
||||||
|
Kids'
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Tab panes -->
|
||||||
|
<div class="tab-content pb-xl-4">
|
||||||
|
|
||||||
|
<!-- Women's tab -->
|
||||||
|
<div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
|
||||||
|
aria-labelledby="womens-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Clothing</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shirts & Tops</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Underwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sweatshirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Dresses</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Swimwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Shoes</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Boots</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sandals</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Heels</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Loafers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Slippers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Oxfords</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Accessories</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Handbags</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Eyewear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hats</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Watches</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Jewelry</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Belts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<div class="h6 mb-2">Specialty Sizes</div>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Plus Size</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Petite</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Wide Shoes</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Narrow Shoes</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
|
||||||
|
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
||||||
|
<div
|
||||||
|
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
||||||
|
<div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-sm btn-dark stretched-link"
|
||||||
|
href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/img/mega-menu/fashion/01.jpg"
|
||||||
|
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
||||||
|
alt="Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Men's tab -->
|
||||||
|
<div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Clothing</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">T-Shirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Jeans</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sweatshirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Underwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Pants</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Shoes</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sneakers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Oxfords</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Loafers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sandals</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Boots</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Slippers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Accessories</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Backpacks</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sunglasses</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Bags</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Watches</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hats</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Belts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<div class="h6 mb-2">Specialty Shops</div>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Active Wear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sports Clothing</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Athletic Shoes</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
|
||||||
|
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
||||||
|
<div
|
||||||
|
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
||||||
|
<div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-sm btn-dark stretched-link"
|
||||||
|
href="shop-catalog-fashion.html" data-bs-theme="dark">Shop now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/img/mega-menu/fashion/02.jpg"
|
||||||
|
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
||||||
|
alt="Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Kids' tab -->
|
||||||
|
<div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Boys</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Pants</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sneakers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sweatshirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Boots</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shorts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Girls</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shirts & Tops</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Dresses</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sneakers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hoodies</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sandals</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Accessories</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Backpacks</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Gloves</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shoe Laces</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Scarves</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hats</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Belts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<div class="h6 mb-2">Shop by Age</div>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Infant</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Toddler</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Little Kid</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Big Kid</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
|
||||||
|
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
||||||
|
<div
|
||||||
|
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
||||||
|
<div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-sm btn-dark stretched-link"
|
||||||
|
href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/img/mega-menu/fashion/03.jpg"
|
||||||
|
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
||||||
|
alt="Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
|
||||||
|
@foreach ($categories as $key => $value)
|
||||||
|
<div class="dropdown position-static pb-lg-2">
|
||||||
|
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0"
|
||||||
|
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
|
||||||
|
aria-expanded="false">
|
||||||
|
|
||||||
|
<span class="animate-target">{{ $value->name }}</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
|
||||||
|
|
||||||
|
<!-- Nav tabs -->
|
||||||
|
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase active" id="womens-tab"
|
||||||
|
data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab"
|
||||||
|
aria-controls="womens-tab-pane" aria-selected="true">
|
||||||
|
Women's
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab"
|
||||||
|
data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane"
|
||||||
|
aria-selected="false" tabindex="-1">
|
||||||
|
Men's
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab"
|
||||||
|
data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane"
|
||||||
|
aria-selected="false" tabindex="-1">
|
||||||
|
Kids'
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Tab panes -->
|
||||||
|
<div class="tab-content pb-xl-4">
|
||||||
|
|
||||||
|
<!-- Women's tab -->
|
||||||
|
<div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
|
||||||
|
aria-labelledby="womens-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Clothing</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shirts & Tops</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Underwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sweatshirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Dresses</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Swimwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Shoes</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Boots</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sandals</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Heels</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Loafers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Slippers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Oxfords</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Accessories</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Handbags</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Eyewear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hats</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Watches</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Jewelry</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Belts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<div class="h6 mb-2">Specialty Sizes</div>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Plus Size</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Petite</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Wide Shoes</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Narrow Shoes</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
|
||||||
|
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
||||||
|
<div
|
||||||
|
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
||||||
|
<div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-sm btn-dark stretched-link"
|
||||||
|
href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/img/mega-menu/fashion/01.jpg"
|
||||||
|
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
||||||
|
alt="Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Men's tab -->
|
||||||
|
<div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Clothing</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">T-Shirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Jeans</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sweatshirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Underwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Pants</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Shoes</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sneakers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Oxfords</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Loafers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sandals</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Boots</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Slippers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Accessories</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Backpacks</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sunglasses</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Bags</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Watches</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hats</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Belts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<div class="h6 mb-2">Specialty Shops</div>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Active Wear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sports Clothing</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Athletic Shoes</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
|
||||||
|
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
||||||
|
<div
|
||||||
|
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
||||||
|
<div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-sm btn-dark stretched-link"
|
||||||
|
href="shop-catalog-fashion.html" data-bs-theme="dark">Shop now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/img/mega-menu/fashion/02.jpg"
|
||||||
|
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
||||||
|
alt="Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Kids' tab -->
|
||||||
|
<div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Boys</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Pants</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sneakers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sweatshirts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Boots</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shorts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Girls</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shirts & Tops</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Dresses</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sneakers</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hoodies</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Sandals</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
|
href="shop-catalog-fashion.html">
|
||||||
|
<span class="animate-target">Accessories</span>
|
||||||
|
</a>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Backpacks</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Gloves</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Shoe Laces</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Scarves</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Hats</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Belts</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">View all</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-2">
|
||||||
|
<div class="h6 mb-2">Shop by Age</div>
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Infant</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Toddler</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Little Kid</a>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex w-100 pt-1">
|
||||||
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
|
href="shop-catalog-fashion.html">Big Kid</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
|
||||||
|
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
||||||
|
<div
|
||||||
|
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
||||||
|
<div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-sm btn-dark stretched-link"
|
||||||
|
href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/img/mega-menu/fashion/03.jpg"
|
||||||
|
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
||||||
|
alt="Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<section class="border-top">
|
<section class="border-top">
|
||||||
<div class="container py-lg-1">
|
<div class="container-xxl py-lg-1">
|
||||||
<div class="overflow-auto" data-simplebar>
|
<div class="overflow-auto" data-simplebar>
|
||||||
<div class="nav flex-nowrap justify-content-between gap-4 py-2">
|
<div class="nav flex-nowrap justify-content-between gap-4 py-2">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
|
|
||||||
<header class="navbar navbar-expand-lg sticky-top d-block bg-body z-10 py-1 py-lg-0 py-xl-1 px-0">
|
<header class="navbar navbar-expand-lg sticky-top d-block bg-body z-10 py-1 py-lg-0 py-xl-1 px-0">
|
||||||
<div class="container justify-content-start py-2 py-lg-3">
|
<div class="container-xxl justify-content-start py-2 py-lg-3">
|
||||||
|
|
||||||
<!-- Offcanvas menu toggler (Hamburger) -->
|
<!-- Offcanvas menu toggler (Hamburger) -->
|
||||||
<button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
|
<button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
|
||||||
|
|
@ -159,8 +159,15 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<x-grocery.header-gender-dropdown />
|
||||||
|
|
||||||
|
|
||||||
<!-- Search collapse available on screens < 768px wide (md breakpoint) -->
|
<!-- Search collapse available on screens < 768px wide (md breakpoint) -->
|
||||||
<div class="collapse d-md-none" id="searchBar">
|
<div class="collapse d-md-none" id="searchBar">
|
||||||
<div class="container pt-2 pb-3">
|
<div class="container pt-2 pb-3">
|
||||||
|
|
@ -179,8 +186,12 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<x-grocery.top-header />
|
<x-grocery.top-header />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Handle desktop search form submission
|
// Handle desktop search form submission
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue