add category, brands, gender navbar
This commit is contained in:
parent
87096be7cc
commit
7baffc9cb5
|
|
@ -4,6 +4,8 @@ namespace App\View\Components\Layout;
|
||||||
|
|
||||||
use App\Repositories\Catalog\CategoryRepository;
|
use App\Repositories\Catalog\CategoryRepository;
|
||||||
use App\Repositories\Catalog\GenderRepository;
|
use App\Repositories\Catalog\GenderRepository;
|
||||||
|
use App\Repositories\Catalog\BrandRepository;
|
||||||
|
|
||||||
use Closure;
|
use Closure;
|
||||||
use Illuminate\Contracts\View\View;
|
use Illuminate\Contracts\View\View;
|
||||||
use Illuminate\View\Component;
|
use Illuminate\View\Component;
|
||||||
|
|
@ -13,6 +15,7 @@ class NavbarCategory extends Component
|
||||||
|
|
||||||
public $genders = [];
|
public $genders = [];
|
||||||
public $categories = [];
|
public $categories = [];
|
||||||
|
public $brands = [];
|
||||||
/**
|
/**
|
||||||
* Create a new component instance.
|
* Create a new component instance.
|
||||||
*/
|
*/
|
||||||
|
|
@ -22,13 +25,18 @@ class NavbarCategory extends Component
|
||||||
|
|
||||||
$genderRepository = new GenderRepository();
|
$genderRepository = new GenderRepository();
|
||||||
$categoryRepository = new CategoryRepository();
|
$categoryRepository = new CategoryRepository();
|
||||||
|
$brandsRepository = new BrandRepository();
|
||||||
|
|
||||||
|
|
||||||
$this->genders = $genderRepository->getList([]);
|
$this->genders = $genderRepository->getList([]);
|
||||||
|
$this->genders = collect($this->genders)->chunk(7);
|
||||||
|
|
||||||
$this->categories = $categoryRepository->getList([]);
|
$this->categories = $categoryRepository->getList([]);
|
||||||
// chunk
|
// chunk
|
||||||
$this->categories = collect($this->categories)->chunk(7);
|
$this->categories = collect($this->categories)->chunk(7);
|
||||||
|
|
||||||
|
$this->brands = $brandsRepository->getList([]);
|
||||||
|
$this->brands = collect($this->brands)->chunk(7);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -269,7 +269,7 @@
|
||||||
<i class="ci-shopping-bag animate-target me-1"></i>
|
<i class="ci-shopping-bag animate-target me-1"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
|
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
|
||||||
<div class="collapse navbar-stuck-hide" id="stuckNav">
|
<div class="collapse navbar-stuck-hide" id="stuckNav">
|
||||||
|
|
|
||||||
|
|
@ -9,15 +9,33 @@
|
||||||
|
|
||||||
<!-- Nav tabs -->
|
<!-- Nav tabs -->
|
||||||
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
|
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
|
||||||
@foreach ($genders as $key => $gender)
|
|
||||||
<li class="nav-item" role="presentation">
|
<li class="nav-item" role="presentation">
|
||||||
<button type="button" class="nav-link text-uppercase {{ $key == 0 ? 'active' : '' }}" id="gender-{{ $gender->id }}-tab"
|
<button type="button" class="nav-link text-uppercase active" id="category-tab"
|
||||||
data-bs-toggle="tab" data-bs-target="#gender-{{ $gender->id }}-tab-pane" role="tab"
|
data-bs-toggle="tab" data-bs-target="#category-tab-pane" role="tab"
|
||||||
aria-controls="gender-{{ $gender->id }}-tab-pane" aria-selected="true">
|
aria-controls="category-tab-pane" aria-selected="true">
|
||||||
{{ $gender->name }}
|
Category
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
@endforeach
|
|
||||||
|
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase" id="brand-tab"
|
||||||
|
data-bs-toggle="tab" data-bs-target="#brand-tab-pane" role="tab"
|
||||||
|
aria-controls="brand-tab-pane" aria-selected="true">
|
||||||
|
Brand
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link text-uppercase" id="gender-tab"
|
||||||
|
data-bs-toggle="tab" data-bs-target="#gender-tab-pane" role="tab"
|
||||||
|
aria-controls="gender-tab-pane" aria-selected="true">
|
||||||
|
Gender
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
{{-- <li class="nav-item" role="presentation">
|
{{-- <li class="nav-item" role="presentation">
|
||||||
<button type="button" class="nav-link text-uppercase active" id="womens-tab" data-bs-toggle="tab"
|
<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"
|
data-bs-target="#womens-tab-pane" role="tab" aria-controls="womens-tab-pane"
|
||||||
|
|
@ -44,48 +62,76 @@
|
||||||
<!-- Tab panes -->
|
<!-- Tab panes -->
|
||||||
<div class="tab-content pb-xl-4">
|
<div class="tab-content pb-xl-4">
|
||||||
|
|
||||||
@foreach ($genders as $key => $gender)
|
|
||||||
<div class="tab-pane fade show {{ $key == 0 ? 'active' : '' }}" id="gender-{{ $gender->id }}-tab-pane" role="tabpanel"
|
<div class="tab-pane fade show active" id="category-tab-pane" role="tabpanel"
|
||||||
aria-labelledby="gender-{{ $gender->id }}-tab">
|
aria-labelledby="category-tab">
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
|
|
||||||
@foreach ($categories as $chunks)
|
@foreach ($categories as $chunks)
|
||||||
|
|
||||||
<div class="col-lg-2">
|
<div class="col-lg-2">
|
||||||
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
@foreach ($chunks as $chunk)
|
@foreach ($chunks as $chunk)
|
||||||
<li class="d-flex w-100 pt-1">
|
<li class="d-flex w-100 pt-1">
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
href="{{ route('product.index', ['filter[category]' => $chunk->id, 'filter[gender]' => $gender->id]) }}">{{ $chunk->name }}</a>
|
href="{{ route('product.index', ['filter[category_id]' => $chunk->id]) }}">{{ $chunk->name }}</a>
|
||||||
</li>
|
</li>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
@endforeach
|
|
||||||
|
|
||||||
|
|
||||||
<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="{{ route('second', ['shop', 'catalog-fashion']) }}"
|
|
||||||
data-bs-theme="light">Shop now</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<img src="/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>
|
@endforeach
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endforeach
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="tab-pane fade show" id="brand-tab-pane" role="tabpanel"
|
||||||
|
aria-labelledby="brand-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
|
||||||
|
@foreach ($brands as $chunks)
|
||||||
|
|
||||||
|
<div class="col-lg-2">
|
||||||
|
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
@foreach ($chunks as $chunk)
|
||||||
|
<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[category_id]' => $chunk->id]) }}">{{ $chunk->name }}</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane fade show" id="gender-tab-pane" role="tabpanel"
|
||||||
|
aria-labelledby="gender-tab">
|
||||||
|
<div class="row g-4">
|
||||||
|
|
||||||
|
@foreach ($genders as $chunks)
|
||||||
|
|
||||||
|
<div class="col-lg-2">
|
||||||
|
|
||||||
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
@foreach ($chunks as $chunk)
|
||||||
|
<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[gender_id]' => $chunk->id]) }}">{{ $chunk->name }}</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue