171 lines
9.0 KiB
PHP
171 lines
9.0 KiB
PHP
<div>
|
|
@include('layouts.partials/offcanvas2')
|
|
|
|
<x-grocery.delivery-options />
|
|
|
|
@include('layouts.partials/menu-offcanvas')
|
|
|
|
|
|
<header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0"
|
|
data-sticky-element>
|
|
<div class="container justify-content-start py-2 py-lg-3">
|
|
|
|
<!-- Offcanvas menu toggler (Hamburger) -->
|
|
<button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
|
|
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Navbar brand (Logo) -->
|
|
<a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5" href="/">AsiaGolf</a>
|
|
|
|
<!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
|
|
<x-grocery.header-category-dropdown />
|
|
|
|
<!-- Search bar visible on screens > 768px wide (md breakpoint) -->
|
|
<div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
|
|
<input type="search" class="form-control form-control-lg rounded-pill"
|
|
placeholder="Search for products" aria-label="Search">
|
|
<button type="button"
|
|
class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
|
|
aria-label="Search button">
|
|
<i class="ci-search"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
|
|
{{-- <div class="nav me-4 me-xxl-5 d-none d-xl-block">
|
|
<a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
|
|
data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
|
|
<div class="h6 fs-sm mb-0">Delivery</div>
|
|
<div class="d-flex align-items-center fs-sm fw-normal text-body">
|
|
<span class="animate-target text-nowrap">Set your address</span>
|
|
<i class="ci-chevron-down fs-base ms-1"></i>
|
|
</div>
|
|
</a>
|
|
</div> --}}
|
|
|
|
|
|
<div class="nav me-4 me-xxl-5 d-none d-xl-block">
|
|
<a class="nav-link flex-column align-items-start animate-underline p-0" href="{{ route('addresses') }}">
|
|
<div class="h6 fs-sm mb-0">Delivery</div>
|
|
<div class="d-flex align-items-center fs-sm fw-normal text-body">
|
|
<span class="animate-target text-nowrap">{{ auth()->user()->primary_address->label ?? 'Set your address' }}</span>
|
|
<i class="ci-chevron-down fs-base ms-1"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Button group -->
|
|
<div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">
|
|
|
|
<!-- Theme switcher (light/dark/auto) -->
|
|
<div class="dropdown">
|
|
<button type="button"
|
|
class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
|
|
<span class="theme-icon-active d-flex animate-target">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
</button>
|
|
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
|
|
<li>
|
|
<button type="button" class="dropdown-item active" data-bs-theme-value="light"
|
|
aria-pressed="true">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
<span class="theme-label">Light</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="dark"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-moon"></i>
|
|
</span>
|
|
<span class="theme-label">Dark</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="auto"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-auto"></i>
|
|
</span>
|
|
<span class="theme-label">Auto</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
|
|
data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
|
|
aria-label="Toggle search bar">
|
|
<i class="ci-search animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
|
|
data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
|
|
aria-label="Toggle delivery options offcanvas">
|
|
<i class="ci-map-pin animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Account button visible on screens > 768px wide (md breakpoint) -->
|
|
<a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
|
|
href="{{ auth()->check() ? route('profile') : route('login') }}">
|
|
<i class="ci-user animate-target"></i>
|
|
<span class="visually-hidden">{{ __('header.account') }}</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<!-- Cart button -->
|
|
{{-- <button type="button"
|
|
class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
|
|
aria-label="Shopping cart">
|
|
<span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
|
|
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
|
|
<i class="ci-shopping-cart animate-target"></i>
|
|
</button> --}}
|
|
|
|
<a type="button" href="{{ route('cart.index') }}"
|
|
class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
|
|
aria-label="Shopping cart">
|
|
@if (auth()->check() && \App\Repositories\Member\Cart\MemberCartRepository::getCount() > 0)
|
|
<span
|
|
class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2 cart-count"
|
|
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
|
|
@endif
|
|
<i class="ci-shopping-cart animate-target me-1"></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search collapse available on screens < 768px wide (md breakpoint) -->
|
|
<div class="collapse d-md-none" id="searchBar">
|
|
<div class="container pt-2 pb-3">
|
|
<div class="position-relative">
|
|
<i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
|
|
<input type="search" class="form-control form-icon-start rounded-pill"
|
|
placeholder="Search for products" data-autofocus="collapse">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<x-grocery.top-header />
|
|
|
|
|
|
</div>
|