fix: Navigation active state redesign + Wishlist in all themes

Issue 1 - Dashboard Still Always Active (Final Fix):
Problem: Despite multiple attempts, dashboard remained active on all routes
Root Cause: Path-based matching with startsWith() was fundamentally flawed
Solution: Complete redesign - use useActiveSection hook state instead
- Replaced ActiveNavLink component with simple Link
- Active state determined by: main.key === item.key
- No more path matching, childPaths, or complex logic
- Single source of truth: useActiveSection hook
Result: Navigation now works correctly - only one menu active at a time 

Changes:
- Sidebar: Uses useActiveSection().main.key for active state
- TopNav: Uses useActiveSection().main.key for active state
- Removed all path-based matching logic
- Simplified navigation rendering

Issue 2 - Wishlist Only in Classic Theme:
Problem: Only ClassicLayout had wishlist icon, other themes missing
Root Cause: Wishlist feature was only implemented in one layout
Solution: Added wishlist icon to all applicable layout themes
- ModernLayout: Added wishlist with module + settings checks
- BoutiqueLayout: Added wishlist with module + settings checks
- LaunchLayout: Skipped (minimal checkout-only layout)
Result: All themes now support wishlist feature 

Files Modified (2):
- admin-spa/src/App.tsx (navigation redesign)
- customer-spa/src/layouts/BaseLayout.tsx (wishlist in all themes)
- admin-spa/dist/app.js + customer-spa/dist/app.js (rebuilt)

Both issues finally resolved with proper architectural approach!
This commit is contained in:
Dwindi Ramadhana
2025-12-26 22:42:41 +07:00
parent 3aaee45981
commit d575e12bf3
2 changed files with 27 additions and 17 deletions

View File

@@ -365,6 +365,8 @@ function ModernLayout({ children }: BaseLayoutProps) {
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
const user = (window as any).woonoowCustomer?.user;
const headerSettings = useHeaderSettings();
const { isEnabled } = useModules();
const { settings: wishlistSettings } = useModuleSettings('wishlist');
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
@@ -426,6 +428,11 @@ function ModernLayout({ children }: BaseLayoutProps) {
</a>
)
)}
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
<Link to="/my-account/wishlist" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
<Heart className="h-4 w-4" /> Wishlist
</Link>
)}
{headerSettings.elements.cart && (
<Link to="/cart" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
@@ -493,6 +500,8 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'BOUTIQUE';
const user = (window as any).woonoowCustomer?.user;
const headerSettings = useHeaderSettings();
const { isEnabled } = useModules();
const { settings: wishlistSettings } = useModuleSettings('wishlist');
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
@@ -552,6 +561,11 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
<User className="h-4 w-4" /> Account
</a>
))}
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
<Link to="/my-account/wishlist" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
<Heart className="h-4 w-4" /> Wishlist
</Link>
)}
{headerSettings.elements.cart && (
<Link to="/cart" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})