220 lines
13 KiB
PHP
220 lines
13 KiB
PHP
<div class="container-xxl navbar-nav px-0 d-none d-lg-flex">
|
|
|
|
|
|
|
|
@foreach ($categories as $key => $value)
|
|
<div class="dropdown position-static" style="{{ $key == 0 ? 'background:#14a751;' : '' }}">
|
|
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="outside" aria-expanded="false">
|
|
|
|
<span class="animate-target" style="{{ $key == 0 ? 'color:white;' : '' }}">{{ $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="{{ route('product.index') }}">
|
|
<span class="animate-target">Brand</span>
|
|
</a>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
@foreach ($brands as $brand)
|
|
<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="{{ route('product.index', ['filter[brand]', $brand->id, 'filter[category]', $value->id]) }}">{{ $brand->name }}</a>
|
|
</li>
|
|
@endforeach
|
|
|
|
</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>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
|
|
<div class="dropdown position-static" style="background:red;">
|
|
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase"
|
|
data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
|
|
<span class="animate-target" style="color:white">SALE</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const dropdowns = document.querySelectorAll('.dropdown.position-static');
|
|
|
|
dropdowns.forEach(function(dropdown) {
|
|
const button = dropdown.querySelector('[data-bs-toggle="dropdown"]');
|
|
const menu = dropdown.querySelector('.dropdown-menu');
|
|
|
|
if (button && menu) {
|
|
// Show dropdown on hover
|
|
dropdown.addEventListener('mouseenter', function() {
|
|
const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(button);
|
|
dropdownInstance.show();
|
|
});
|
|
|
|
// Hide dropdown on mouse leave
|
|
dropdown.addEventListener('mouseleave', function() {
|
|
const dropdownInstance = bootstrap.Dropdown.getInstance(button);
|
|
if (dropdownInstance) {
|
|
dropdownInstance.hide();
|
|
}
|
|
});
|
|
|
|
// Prevent dropdown from closing when clicking inside
|
|
menu.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|