Samir Boulahtit
adc36246b8
Some checks failed
Storefront homepage & module gating:
- CMS owns storefront GET / (slug="home" with 3-tier resolution)
- Catalog loses GET / (keeps /products only)
- Store root redirect (GET / → /store/dashboard or /store/login)
- Route gating: non-core modules return 404 when disabled for platform
- Seed store default homepages per platform
Widget protocol for customer dashboard:
- StorefrontDashboardCard contract in widgets.py
- Widget aggregator get_storefront_dashboard_cards()
- Orders and Loyalty module widget providers
- Dashboard template renders contributed cards (no module names)
Landing template module-agnostic:
- CTAs driven by storefront_nav (not hardcoded module names)
- Header actions check nav item IDs (not enabled_modules)
- Remove hardcoded "Add Product" sidebar button
- Remove all enabled_modules checks from storefront templates
i18n fixes:
- Title placeholder resolution ({{store_name}}) for store default pages
- Storefront nav label_keys prefixed with module code
- Add storefront.account.* keys to 6 modules (en/fr/de/lb)
- Header/footer CMS pages use get_translated_title(current_language)
- Footer labels use i18n keys instead of hardcoded English
Icon cleanup:
- Standardize on map-pin (remove location-marker alias)
- Replace all location-marker references across templates and docs
Docs:
- Storefront builder vision proposal (6 phases)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
147 lines
7.7 KiB
HTML
147 lines
7.7 KiB
HTML
{# app/templates/store/partials/sidebar.html #}
|
|
{# Dynamic sidebar driven by menu discovery API - matching merchant/admin pattern #}
|
|
|
|
{# ============================================================================
|
|
SIDEBAR CONTENT (shared between desktop and mobile)
|
|
============================================================================ #}
|
|
|
|
{% macro sidebar_content() %}
|
|
<div class="py-4 text-gray-500 dark:text-gray-400">
|
|
<!-- Store Branding -->
|
|
<a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200 flex items-center"
|
|
:href="`/store/${storeCode}/dashboard`">
|
|
<span class="text-2xl mr-2">🏪</span>
|
|
<span x-text="store?.name || 'Store Portal'"></span>
|
|
</a>
|
|
|
|
<!-- Loading skeleton -->
|
|
<div x-show="menuLoading" class="mt-6 px-6 space-y-4 animate-pulse">
|
|
<div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
|
|
<div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-full"></div>
|
|
<div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
|
|
</div>
|
|
|
|
<!-- Dynamic menu from API -->
|
|
<div x-show="!menuLoading && menuData" x-cloak>
|
|
<template x-for="section in (menuData?.sections || [])" :key="section.id">
|
|
<div>
|
|
{# Unlabeled sections (e.g. "main" with dashboard) render items directly #}
|
|
<template x-if="!section.label">
|
|
<ul class="mt-6">
|
|
<template x-for="item in section.items" :key="item.id">
|
|
<li class="relative px-6 py-3">
|
|
<span x-show="currentPage === item.id" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
|
|
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
:class="currentPage === item.id ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
:href="item.url">
|
|
<span x-html="$icon(item.icon, 'w-5 h-5')"></span>
|
|
<span class="ml-4" x-text="item.label"></span>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</template>
|
|
|
|
{# Labeled sections are collapsible #}
|
|
<template x-if="section.label">
|
|
<div>
|
|
<div class="px-6 my-4">
|
|
<hr class="border-gray-200 dark:border-gray-700" />
|
|
</div>
|
|
<button
|
|
@click="toggleSection(section.id)"
|
|
class="flex items-center justify-between w-full px-6 py-2 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
|
>
|
|
<span class="flex items-center" x-text="section.label"></span>
|
|
<span
|
|
x-html="$icon('chevron-down', 'w-4 h-4 transition-transform duration-200')"
|
|
:class="{ 'rotate-180': openSections[section.id] }"
|
|
></span>
|
|
</button>
|
|
<ul
|
|
x-show="openSections[section.id]"
|
|
x-transition:enter="transition-all duration-200 ease-out"
|
|
x-transition:enter-start="opacity-0 -translate-y-2"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition-all duration-150 ease-in"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-2"
|
|
class="mt-1 overflow-hidden"
|
|
>
|
|
<template x-for="item in section.items" :key="item.id">
|
|
<li class="relative px-6 py-3">
|
|
<span x-show="currentPage === item.id" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
|
|
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
:class="currentPage === item.id ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
:href="item.url">
|
|
<span x-html="$icon(item.icon, 'w-5 h-5')"></span>
|
|
<span class="ml-4" x-text="item.label"></span>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Fallback: static dashboard link + warning (if menu API fails) -->
|
|
<div x-show="!menuLoading && !menuData" x-cloak>
|
|
<ul class="mt-6">
|
|
<li class="relative px-6 py-3">
|
|
<span x-show="currentPage === 'dashboard'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
|
|
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
:class="currentPage === 'dashboard' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
:href="`/store/${storeCode}/dashboard`">
|
|
<span x-html="$icon('home', 'w-5 h-5')"></span>
|
|
<span class="ml-4">Dashboard</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="px-6 mt-4">
|
|
<p class="text-xs text-gray-400 dark:text-gray-500">
|
|
Menu unavailable. Showing default items only.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# ============================================================================
|
|
DESKTOP SIDEBAR
|
|
============================================================================ #}
|
|
|
|
<aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
|
|
{{ sidebar_content() }}
|
|
</aside>
|
|
|
|
{# ============================================================================
|
|
MOBILE SIDEBAR
|
|
============================================================================ #}
|
|
|
|
<!-- Mobile sidebar backdrop -->
|
|
<div x-show="isSideMenuOpen"
|
|
x-transition:enter="transition ease-in-out duration-150"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in-out duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"></div>
|
|
|
|
<!-- Mobile sidebar panel -->
|
|
<aside class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
|
|
x-show="isSideMenuOpen"
|
|
x-transition:enter="transition ease-in-out duration-150"
|
|
x-transition:enter-start="opacity-0 transform -translate-x-20"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in-out duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0 transform -translate-x-20"
|
|
@click.away="closeSideMenu"
|
|
@keydown.escape="closeSideMenu">
|
|
{{ sidebar_content() }}
|
|
</aside>
|