You've already forked wc-bootstrap
magdev
7034134678
Redesign navigation with endpoint icons, offcanvas-lg responsive pattern, and sticky sidebar. Replace flat dashboard with card-based welcome greeting (avatar) and quick-action grid. Wrap all forms (edit-account, edit-address, lost/reset-password) in card sections with icon headers. Restructure view-order with summary card and status badge component. Override WooCommerce's float-based layout and max-width constraint to let Bootstrap flex grid handle sizing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
2.5 KiB
Twig
64 lines
2.5 KiB
Twig
{#
|
|
# My Account Navigation (Bootstrap 5 Override)
|
|
#
|
|
# Renders the sidebar navigation for the My Account area
|
|
# using Bootstrap list-group component with icons.
|
|
# Responsive: offcanvas on mobile, sticky sidebar on desktop.
|
|
#
|
|
# WooCommerce PHP equivalent: myaccount/navigation.php
|
|
#
|
|
# @package WcBootstrap
|
|
# @since 0.1.0
|
|
#}
|
|
|
|
{% set endpoint_icons = {
|
|
'dashboard': 'bi-speedometer2',
|
|
'orders': 'bi-bag',
|
|
'downloads': 'bi-download',
|
|
'edit-address': 'bi-geo-alt',
|
|
'payment-methods': 'bi-credit-card',
|
|
'edit-account': 'bi-person-gear',
|
|
'customer-logout': 'bi-box-arrow-right',
|
|
} %}
|
|
|
|
{{ do_action('woocommerce_before_account_navigation') }}
|
|
|
|
<button class="btn btn-outline-secondary w-100 mb-3 d-lg-none"
|
|
type="button"
|
|
data-bs-toggle="offcanvas"
|
|
data-bs-target="#accountNav"
|
|
aria-controls="accountNav">
|
|
<i class="bi bi-list me-1" aria-hidden="true"></i>
|
|
{{ __('Account menu') }}
|
|
</button>
|
|
|
|
<div class="offcanvas-lg offcanvas-start" id="accountNav" tabindex="-1"
|
|
aria-labelledby="accountNavLabel">
|
|
<div class="offcanvas-header d-lg-none">
|
|
<h5 class="offcanvas-title" id="accountNavLabel">{{ __('Account menu') }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
|
|
data-bs-target="#accountNav" aria-label="{{ __('Close') }}"></button>
|
|
</div>
|
|
<div class="offcanvas-body p-0">
|
|
<nav class="woocommerce-MyAccount-navigation position-sticky"
|
|
style="top: 5rem;"
|
|
aria-label="{{ __('Account navigation') }}">
|
|
<div class="list-group">
|
|
{% for endpoint, label in wc_get_account_menu_items() %}
|
|
{% set is_active = wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %}
|
|
<a href="{{ wc_get_account_endpoint_url(endpoint)|esc_url }}"
|
|
class="list-group-item list-group-item-action d-flex align-items-center{% if is_active %} active{% endif %}"
|
|
{% if is_active %}aria-current="page"{% endif %}>
|
|
{% if endpoint_icons[endpoint] is defined %}
|
|
<i class="bi {{ endpoint_icons[endpoint] }} me-2" aria-hidden="true"></i>
|
|
{% endif %}
|
|
{{ label|esc_html }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{{ do_action('woocommerce_after_account_navigation') }}
|